npm.io
1.1.1 ā€¢ Published 1 month ago

react-three-toggle

Licence
MIT
Version
1.1.1
Deps
0
Vulns
0
Weekly
0
Stars
4
SummaryDependencyVersions

react-three-toggle

Multi-value toggle component for React. Cycle through three or more options on click.

npm license

A small, dependency-free toggle that cycles through 3+ options with a sliding indicator. Click or use arrow keys. Supports controlled / uncontrolled modes, wrap-around, horizontal / vertical orientation, and form integration via a hidden input.

Demo: https://react-three-toggle.kkweb.io

Install

npm install react-three-toggle

Requires React 18 or 19.

Usage

import { ThreeToggle } from "react-three-toggle";

export function App() {
  return (
    <ThreeToggle
      values={["light", "auto", "dark"]}
      defaultValue="auto"
      onValueChange={(v) => console.log(v)}
    />
  );
}

Rich labels:

<ThreeToggle
  values={[
    { label: "šŸŒž Light", value: "light" },
    { label: "šŸ¤– Auto", value: "auto" },
    { label: "šŸŒ™ Dark", value: "dark" },
  ]}
/>

API

Prop Type Default Description
values string[] | { label?, value }[] ā€” Options. At least one required.
defaultValue string first option Initial value (uncontrolled).
value string ā€” Controlled value.
onValueChange (value: string) => void ā€” Fired on selection change.
wrap boolean true Wrap from last back to first; set false to stop at the end.
orientation "horizontal" | "vertical" "horizontal" Layout direction.
name string ā€” Renders a hidden input for form submission.
disabled boolean false Disable interaction.
className string ā€” Root class.
indicatorClassName string ā€” Indicator class.
optionClassName string ā€” Option class.

Each option exposes data-selected="true" when active. Root exposes data-three-toggle, data-orientation, data-disabled.

License

MIT

Keywords

reacttogglemulti-toggleswitchcycleheadless