DANIELS BOOKSHELF

A collection of reusable React components and hooks. This package includes the ThemeToggle component for a light/dark mode switch and the useLocalStorage hook for persisting state in the browser's localStorage.

Installation

npm install daniels-bookshelf

or

yarn add daniels-bookshelf

Components and Hooks

ThemeToggle

A toggle switch for changing between light and dark themes.

Props:

• onChange: (value: AvailableThemesType) => void - Callback function that is called when the toggle value changes.

• theme: AvailableThemesType - The current theme ('light' or 'dark').

Usage:

import { ThemeToggle } from 'daniels-bookshelf';

function App() {
  const [theme, setTheme] = useState('light');

  const handleThemeChange = (newTheme) => {
    setTheme(newTheme);
  };

  return <ThemeToggle theme={theme} onChange={handleThemeChange} />;
}

Styling

The ThemeToggle component requires some CSS for proper styling. Include the CSS commented out at the bottom of in your global stylesheet

/* accessible toggle from https://github.com/grace-snow/fmentor_pricing-component-with-toggle */
/*----------------------------
	    Toggle control
----------------------------*/
.radio-switch {
  border: none;
  margin: 2.5rem auto;
  margin-left: 0;
  padding: 0;
  white-space: nowrap;
  font-size: 0.825rem;
  /*
		* Inner wrapper sets a position relative so I can position absolute the inputs.
		* display inline-block keeps the wrapper only as wide as the radio switch within.
	*/
  /*
		relative labels to help position the pseudo elements
		the z-index will be handy later, when the labels that overlap the visual switch UI need to be adjusted to allow for a user to toggle the switch without having to move their mouse/finger to the different sides of the UI
	*/
  /*
	* A toggle can only have 2 options, so use structural pseudo-classes to target them.
	* the large padding is used to position the labels on top of the visual UI, so the switch UI itself can be mouse clicked or finger tapped to toggle the current option
	*/
  /* Move the 2nd label to have a lower z-index, so when that option is toggled, the first label will overlay on top of the Switch ui, and the switch can be pressed again to toggle back to the prevoius state. */
}

.radio-switch__inner {
  display: inline-block;
  position: relative;
}

.radio-switch__label {
  display: inline-block;
  line-height: 2;
  position: relative;
  z-index: 2;
  cursor: pointer;
}

.radio-switch input {
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  background: none;
  height: 100%;
  margin: 0;
  opacity: 0.00001;
  position: absolute;
  top: 0;
  width: 30%;
  z-index: 3;
}

.radio-switch input:first-of-type {
  left: 0;
}

.radio-switch input:last-of-type {
  right: 0;
}

.radio-switch input:not(:checked):hover + label {
  text-decoration: underline;
}

.radio-switch label:first-of-type {
  padding-right: 5em;
}

.radio-switch label:last-child {
  margin-left: -4.25em;
  padding-left: 5em;
}

.radio-switch:focus-within label:first-of-type:after {
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px #b3b5c6;
}

.radio-switch label:first-of-type:before,
.radio-switch label:first-of-type:after {
  content: '';
  height: 2em;
  overflow: hidden;
  pointer-events: none;
  position: absolute;
  vertical-align: middle;
}

.radio-switch label:first-of-type:before {
  background: #fff;
  border-radius: 100%;
  position: absolute;
  transition: right 0.2s ease-in-out;
  right: 2px;
  top: 2px;
  height: calc(2em - (2 * 2px));
  width: calc(2em - (2 * 2px));
  z-index: 2;
}

.radio-switch label:first-of-type:after {
  background: linear-gradient(to bottom right, #a3a8f0, #696fdd);
  border-radius: 1em;
  margin: 0 1em;
  transition: background 0.2s ease-in-out;
  width: 4em;
}

.radio-switch input:first-of-type:checked ~ label:first-of-type:before {
  right: calc(2em + 2px);
}

.radio-switch input:last-of-type:checked ~ label:last-of-type {
  z-index: 1;
}

/*
	*	ACCESSIBILITY extra: High Contrast Mode
	* 'color in' the switch knob in high contrast mode by giving it a large border:
*/
@media screen and (-ms-high-contrast: active) {
  .radio-switch label:first-of-type:before {
    background-color: windowText;
    border: 1em solid transparent;
    /* firefox doesn't respect the bg color,
				so the border fills the knob */
  }
  .radio-switch:focus-within label:first-of-type:after {
    outline: 2px solid;
    outline-offset: 3px;
  }
}

/*
	! IE11 Hacks to position the switch knob correctly
*/
_:-ms-fullscreen,
:root .radio-switch label:first-of-type:before {
  right: -0.2em;
}

_:-ms-fullscreen,
:root .radio-switch input:first-of-type:checked ~ label:first-of-type:before {
  right: 1.8em;
}``

useLocalStorage

A hook to store and retrieve state in the browser's localStorage.

Parameters:

• key: string - The key under which the value is stored in localStorage.
• initialValue: T | (() => T) - The initial value or a function that returns the initial value.

Returns:

• [value, setValue]: [T, typeof setValue] - The current value in the local storage and a function to update it.

Usage:

import { useLocalStorage } from 'daniels-bookshelf';

function App() {
  const [name, setName] = useLocalStorage('name', 'Daniel');

  return (
    <div>
      <input
        type='text'
        value={name}
        onChange={(e) => setName(e.target.value)}
      />
    </div>
  );
}