DEV Community

Cover image for Published Isolated, Reusable - React Component 🎉🎉
Navdeep Singh
Navdeep Singh

Posted on

Published Isolated, Reusable - React Component 🎉🎉

Happy to announce that I published my first Isolated & Reusable React Component on Bit.dev platform 🎉🎉🎉🎉.

Here is the link DayNightSwitcher.
Description: The accessible day-night theme switcher react component.

Already implemented on my newly developed website which crafted using Tech Stack: Gatsby & Netlify CMS https://navdeepsingh.in/

Here is the screencast.
Alt Text

Hope it will serve the purpose. The benefit of the loosely coupled component is that we can do testing easily and also state management can be done with a personal choice like ContextAPI, Redux, MobX, etc.

Looking for your comments!!

Discussion (6)

Collapse
alfredosalzillo profile image
Alfredo Salzillo 🐺

Why you are heavenly using document.querySelector and ref?

It should be like this and still be accessible.

import React, {useRef, useEffect} from "react";
import "./index.scss";

type SwitcherProps = {
  mode: string;
  themeSwitcher: Function;
}

// Getting state & action through props is first step for resuable components
const DayNightSwitcher = ({ mode, themeSwitcher }: SwitcherProps) => {
  const checked = mode !== 'bright';
  return(
    <>
      <div className={`react-toggle ${checked ? 'react-toggle--checked' : ''}`}
        onClick={themeSwitcher}
      >
        <div className="react-toggle-track">
          <div className="react-toggle-track-check">
            <span className="toggle_icon moon"></span>
          </div>
          <div className="react-toggle-track-x">
            <span className="toggle_icon sun"></span>
          </div>
        </div>
        <div className="react-toggle-thumb"></div>
        <input
          type="checkbox"
          aria-label="Dark mode toggle"
          aria-checked={checked}          
          className="react-toggle-screenreader-only"
        />
      </div>
    </>
  )
}

export default DayNightSwitcher;
Enter fullscreen mode Exit fullscreen mode

and into index.scss

.#{$prefix}:focus {
  .react-toggle-thumb {
    box-shadow: 0 0 2px 3px #0099e0;
  }
Enter fullscreen mode Exit fullscreen mode

also your assertion

// Getting state & action through props is first step for resuable components
isn't true.

In this case, the component should support also a fully un-controlled version, with the optional props onChange and defaultMode with internal state.

Olso the bright should be light.

Also, the typings of mode should be 'light' | 'dark'.

Collapse
good3n profile image
Tom Gooden✨

I strongly believe the only purpose the author had for this article was to drop a link to their website.

Collapse
alfredosalzillo profile image
Alfredo Salzillo 🐺

I agree.
Like a lot of authors recently.

A dislike would be a nice feature.

Collapse
navdeepsingh profile image
Navdeep Singh Author

Well! I just tried to show the implementation, that's it. And certainly no bad to showcase your own website on DEV.to platform.
Thanks bro!!

Thread Thread
good3n profile image
Tom Gooden✨

But you're not providing any value, to anyone. Why don't you edit your post and go through your process?

Collapse
navdeepsingh profile image
Navdeep Singh Author

Hello!
Its my first reusable component and I am learning. Will surely work on your comments and will try to improve it.
Thanks bro!!