React Component

The official react component library for our toggles built from the HTML package

Usage

1. Install

yarn add @theme-toggles/react
# or
npm install @theme-toggles/react

2. Import css into app.js or equivalent

// app.js or equivalent
import "@theme-toggles/react/css/[toggle name].css"

Note: You can import all css using bundle.css but this isn't recommended unless all toggles are being used since you will have unused css.

3. Import and use the component, so the classic toggle would look like

import { Classic } from "@theme-toggles/react"

<Classic />

Reversed

All the toggles are reversible via the reversed prop

import { Classic } from "@theme-toggles/react"

<Classic reversed />

Handling state

The component can handle it's own state internally but also provides a way for you to have complete control. The following example shows how you can provide your own state

const [isToggled, setToggle] = useState(false)

<Classic toggled={isToggled} toggle={setToggle} />

Styling

The toggles use currentColor for their SVGs. To change the color of a toggle, simply change the css color property of the component.

Toggles

Find the full range of toggles here. The React code can be found via the upper tab when on a toggle's page

Props

The component accepts all the button props as well as the following

duration: number

The duration of the animation in milliseconds

Default: 500ms

reversed: boolean

Reverses the animation

Default: false

onToggle: (toggled: boolean) => void

Called when a user clicks the toggle

Default: undefined

toggled: boolean

Used to specify if the toggle active. If undefined, the toggle will use it's internal state

Default: undefined

toggle: Dispatch<SetStateAction<boolean>>

Used to provide your own state

Default: undefined

forceMotion: boolean

Used to force motion despite the client having reduced motion applied. For accessability reasons, this library respects reduced motion by default

Default: false

idPrefix: string

Used to prefix the id's used in the SVGs. Useful for when multiple versions of the same toggle are being used on a page

Default: ""

Accessability

As the toggle is a button, we use the aria-label for accessability. Since these components are built with accessability in mind, this defaults to "Toggle theme".

It's also recommend to add a title for accessability. Since these components are built with accessability in mind, this defaults to "Toggle theme".

You can also provided a tabIndex attribute

Reduced Motion

This library respects reduced motion and removes the animations when a client has this enabled.