DEV Community

loading...
Cover image for Published Isolated, Reusable - React Component πŸŽ‰πŸŽ‰

Published Isolated, Reusable - React Component πŸŽ‰πŸŽ‰

navdeepsingh profile image Navdeep Singh ・1 min read

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

pic
Editor guide
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
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!!

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

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