{"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.","language":"javascript","status":"abandoned","last_verified":"Sun Apr 19","install":{"commands":["npm install react-toggled"],"cli":null},"imports":["import Toggle from 'react-toggled'","import Toggle from 'react-toggled/preact'","const Toggle = require('react-toggled')"],"auth":{"required":false,"env_vars":[]},"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`.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}