Published Isolated, Reusable - React Component 🎉🎉

#react #typescript #javascript #a11y

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.

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!!

Top comments (6)

Alfredo Salzillo • Nov 20 '20

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;

and into index.scss

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

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'.