Registry / web-framework / react-toggled

react-toggled

library1.2.7jsnpmunverified

react-toggled is a React component library leveraging the render prop pattern to provide flexible and accessible toggle components. It encapsulates the state management logic for a toggle, giving developers full control over the rendered UI. The latest stable version, 1.2.7, was released in June 2018. This indicates the project is no longer actively maintained, making it potentially incompatible with modern React features like hooks or concurrent mode, or recent ecosystem changes. Its design was inspired by libraries like `downshift`, offering a minimalist API that exposes the toggle state and helper functions to a child render prop. Key differentiators include built-in support for Preact and a focus on WAI-ARIA accessibility standards for its controlled and uncontrolled toggle patterns.

web-framework

npm install react-toggled

github ↗package ↗

INSTALL

IMPORT

SIG · REACT-TOGGLED

react-toggled

web-frameworkjavascriptv1.2.7

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

Toggle

✓ import Toggle from 'react-toggled'

✗ import { Toggle } from 'react-toggled'

The main component is a default export from the package root.

Toggle

✓ import Toggle from 'react-toggled/preact'

✗ import { Toggle } from 'react-toggled/preact'

For Preact users, the component is available via a separate entry point.

Toggle

✓ const Toggle = require('react-toggled')

✗ const { Toggle } = require('react-toggled')

CommonJS import for Node.js environments or older build setups.

Demonstrates a basic accessible toggle component using `react-toggled`'s render prop pattern, including state management and UI rendering with WAI-ARIA attributes applied via `getTogglerProps`.

import React from 'react'; import { render } from 'react-dom'; import Toggle from 'react-toggled'; function App() { return ( <Toggle> {({ on, getTogglerProps, setOn, setOff, toggle }) => ( <div style={{ padding: 20, border: '1px solid gray', borderRadius: 8 }}> <button {...getTogglerProps({ 'aria-label': 'toggle button', style: { backgroundColor: on ? 'green' : 'red', color: 'white', padding: '10px 20px', border: 'none', borderRadius: 4, cursor: 'pointer' }, onClick: () => console.log(`Button clicked, state is now ${on ? 'ON' : 'OFF'}`) })}> {on ? 'Toggle Me (ON)' : 'Toggle Me (OFF)'} </button> <div style={{ marginTop: 10, fontSize: 18 }}> Status: {on ? 'Toggled On' : 'Toggled Off'} </div> <p style={{ marginTop: 15, fontSize: 14, color: '#555' }}> This demonstrates a flexible toggle with WAI-ARIA attributes. The `getTogglerProps` function automatically applies necessary props like `onClick` and `aria-pressed` based on the internal state. </p> </div> )} </Toggle> ); } const rootElement = document.getElementById('root'); if (rootElement) { render(<App />, rootElement); } else { console.error("Root element not found to render React app."); } // Assumes an HTML structure with `<div id="root"></div>` for rendering.

Debug

Known issues

breakingThe project has not been actively maintained since mid-2018 (v1.2.7). It may not be compatible with newer versions of React (e.g., React 17+, React 18+ with hooks, concurrent mode), modern accessibility standards updates, or contemporary TypeScript features.

fix

Consider migrating to a more actively maintained library or implementing custom toggle logic using React hooks (e.g., `useState`, `useReducer`) for better long-term compatibility and features.

affects: >=1.2.7

gotcha`react-toggled` requires `prop-types` as a peer dependency. In modern React projects, `prop-types` is often omitted or removed via build tools, especially when using TypeScript.

fix

Ensure `prop-types` is installed (`npm install prop-types`) if you encounter dependency warnings. For production builds, consider configuring your bundler (e.g., Webpack, Rollup) to remove `prop-types` from the final output for performance.

affects: >=1.0.0

gotchaWhen using the `on` prop (a control prop), it is crucial to also provide an `onToggle` handler to manage state updates. Failing to do so will result in the toggle state being immutable and unresponsive to user interactions.

fix

Always provide an `onToggle` prop when `on` is used, and update the `on` prop based on the `onToggle` callback. For uncontrolled behavior, omit the `on` prop and let the component manage its internal state.

affects: >=1.0.0

Errors

Common errors & fixes

Warning: A component is changing an uncontrolled input to be controlled. This is likely caused by the value changing from undefined to a defined value, which should not happen. Decide between using a controlled or uncontrolled input element for the lifetime of the component.

The `on` prop was initially `undefined` or `null`, allowing the component to be uncontrolled, and later updated to a boolean value, attempting to make it controlled.

fix

Ensure the `on` prop is consistently either provided with a boolean value (controlled) or entirely omitted (uncontrolled) throughout the component's lifecycle. Do not switch between `undefined`/`null` and `boolean` for the `on` prop.

TypeError: children is not a function

The `children` prop of `Toggle` was not provided as a function, which is required for the render prop pattern used by `react-toggled`.

fix

Wrap your toggle logic inside a function passed as a child to the `<Toggle>` component: `<Toggle>{({ on, getTogglerProps }) => (/* ... */)}</Toggle>`.

Upgrade

Version history

1.2.7latest on npm

Audit

Dependencies

reactrequiredPeer dependency for React applications.

prop-typesrequiredPeer dependency for type checking in non-TypeScript React applications.

Agent activity

4 hits · last 30 days

node

Resources

githubhttps://github.com/kentcdodds/react-toggled ↗

packagehttps://www.npmjs.com/package/react-toggled ↗