{"id":13913,"library":"react-toggled","title":"React Toggled Component","description":"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.","status":"abandoned","version":"1.2.7","language":"javascript","source_language":"en","source_url":"https://github.com/kentcdodds/react-toggled","tags":["javascript","toggle","react","accessibility","WAI-ARIA","typescript"],"install":[{"cmd":"npm install react-toggled","lang":"bash","label":"npm"},{"cmd":"yarn add react-toggled","lang":"bash","label":"yarn"},{"cmd":"pnpm add react-toggled","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency for React applications.","package":"react","optional":false},{"reason":"Peer dependency for type checking in non-TypeScript React applications.","package":"prop-types","optional":false}],"imports":[{"note":"The main component is a default export from the package root.","wrong":"import { Toggle } from 'react-toggled'","symbol":"Toggle","correct":"import Toggle from 'react-toggled'"},{"note":"For Preact users, the component is available via a separate entry point.","wrong":"import { Toggle } from 'react-toggled/preact'","symbol":"Toggle","correct":"import Toggle from 'react-toggled/preact'"},{"note":"CommonJS import for Node.js environments or older build setups.","wrong":"const { Toggle } = require('react-toggled')","symbol":"Toggle","correct":"const Toggle = require('react-toggled')"}],"quickstart":{"code":"import React from 'react';\nimport { render } from 'react-dom';\nimport Toggle from 'react-toggled';\n\nfunction App() {\n  return (\n    <Toggle>\n      {({ on, getTogglerProps, setOn, setOff, toggle }) => (\n        <div style={{ padding: 20, border: '1px solid gray', borderRadius: 8 }}>\n          <button {...getTogglerProps({\n            'aria-label': 'toggle button',\n            style: {\n              backgroundColor: on ? 'green' : 'red',\n              color: 'white',\n              padding: '10px 20px',\n              border: 'none',\n              borderRadius: 4,\n              cursor: 'pointer'\n            },\n            onClick: () => console.log(`Button clicked, state is now ${on ? 'ON' : 'OFF'}`)\n          })}>\n            {on ? 'Toggle Me (ON)' : 'Toggle Me (OFF)'}\n          </button>\n          <div style={{ marginTop: 10, fontSize: 18 }}>\n            Status: {on ? 'Toggled On' : 'Toggled Off'}\n          </div>\n          <p style={{ marginTop: 15, fontSize: 14, color: '#555' }}>\n            This demonstrates a flexible toggle with WAI-ARIA attributes. \n            The `getTogglerProps` function automatically applies necessary props \n            like `onClick` and `aria-pressed` based on the internal state.\n          </p>\n        </div>\n      )}\n    </Toggle>\n  );\n}\n\nconst rootElement = document.getElementById('root');\nif (rootElement) {\n  render(<App />, rootElement);\n} else {\n  console.error(\"Root element not found to render React app.\");\n}\n// Assumes an HTML structure with `<div id=\"root\"></div>` for rendering.","lang":"typescript","description":"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`."},"warnings":[{"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.","message":"The 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.","severity":"breaking","affected_versions":">=1.2.7"},{"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.","message":"`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.","severity":"gotcha","affected_versions":">=1.0.0"},{"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.","message":"When 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.","severity":"gotcha","affected_versions":">=1.0.0"}],"env_vars":null,"search_vec":"'1.2.7':45 '2018':50 'access':21,118,130 'activ':58 'api':88 'aria':117,133 'built':106 'built-in':105 'chang':76 'child':99 'compon':3,10,23 'concurr':71 'control':36,122 'design':78 'develop':34 'differenti':103 'downshift':84 'ecosystem':75 'encapsul':25 'expos':90 'featur':67 'flexibl':19 'focus':113 'full':35 'function':96 'give':33 'helper':95 'hook':69 'includ':104 'incompat':63 'indic':52 'inspir':80 'javascript':127 'june':49 'key':102 'latest':42 'leverag':12 'librari':11,82 'like':68,83 'logic':29 'longer':57 'maintain':59 'make':60 'manag':28 'minimalist':87 'mode':72 'modern':65 'offer':85 'pattern':16,126 'potenti':62 'preact':110 'project':54 'prop':15,101 'provid':18 'react':1,5,9,66,129 'react-toggl':4 'recent':74 'releas':47 'render':14,39,100 'stabl':43 'standard':119 'state':27,93 'support':108 'toggl':2,6,22,32,92,125,128 'typescript':134 'ui':40 'uncontrol':124 'version':44 'wai':116,132 'wai-aria':115,131","created_at":"2026-04-20T01:56:58.438158+00:00","updated_at":"2026-04-20T01:56:58.438158+00:00","problems":[{"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.","cause":"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.","error":"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."},{"fix":"Wrap your toggle logic inside a function passed as a child to the `<Toggle>` component: `<Toggle>{({ on, getTogglerProps }) => (/* ... */)}</Toggle>`.","cause":"The `children` prop of `Toggle` was not provided as a function, which is required for the render prop pattern used by `react-toggled`.","error":"TypeError: children is not a function"}],"ecosystem":"npm","meta_description":null,"install_score":null,"quickstart_score":null,"quickstart_tag":null,"pypi_latest":null,"cli_name":"","cli_version":null,"type":"library","homepage":null,"github":"https://github.com/kentcdodds/react-toggled","docs":null,"changelog":null,"pypi":null,"npm":"https://www.npmjs.com/package/react-toggled","openapi_spec":null,"status_page":null,"smithery":null,"categories":["web-framework"],"base_url":null,"auth_type":null,"provenance":{"verified_status":null,"verified_at":null,"last_verified":"2026-06-17","next_check":"2026-07-18","install_tag":null}}