{"id":19959635,"url":"https://github.com/aslam97/react-fancy-switch","last_synced_at":"2025-04-05T07:01:50.690Z","repository":{"id":247912813,"uuid":"827211494","full_name":"Aslam97/react-fancy-switch","owner":"Aslam97","description":"React Fancy Switch","archived":false,"fork":false,"pushed_at":"2025-03-18T15:45:09.000Z","size":200,"stargazers_count":171,"open_issues_count":1,"forks_count":5,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-29T06:01:40.943Z","etag":null,"topics":["react-radio","react-switch"],"latest_commit_sha":null,"homepage":"https://react-fancy-radio.vercel.app","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Aslam97.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-07-11T07:58:44.000Z","updated_at":"2025-03-28T15:16:25.000Z","dependencies_parsed_at":"2024-10-28T15:07:19.272Z","dependency_job_id":"024d0c98-15d7-43e6-adea-4a274ad0933c","html_url":"https://github.com/Aslam97/react-fancy-switch","commit_stats":null,"previous_names":["aslam97/shadcn-fancy-switch","aslam97/react-fancy-radio","aslam97/react-fancy-switch","aslam97/react-fancy-radio-or-switch"],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Aslam97%2Freact-fancy-switch","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Aslam97%2Freact-fancy-switch/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Aslam97%2Freact-fancy-switch/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Aslam97%2Freact-fancy-switch/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Aslam97","download_url":"https://codeload.github.com/Aslam97/react-fancy-switch/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247299829,"owners_count":20916190,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["react-radio","react-switch"],"created_at":"2024-11-13T01:48:28.746Z","updated_at":"2025-04-05T07:01:50.598Z","avatar_url":"https://github.com/Aslam97.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003ca href='https://react-fancy-radio.vercel.app/' target='_blank'\u003e\n  \u003cimg src='https://i.postimg.cc/59Bc5bR5/Screenshot-2024-08-13-at-16-33-21.png' border='0' alt=\"React Fancy Switch\" /\u003e\n\u003c/a\u003e\n\n\u003cp style={{ textAlign: 'center' }}\u003e\n\u003ca href=\"https://github.com/umodoc/editor/blob/main/LICENSE\" target=\"_blank\"\u003e\u003cimg src=\"https://img.shields.io/npm/l/%40omit%2Freact-fancy-switch\" /\u003e\u003c/a\u003e\n\u003ca href=\"https://www.npmjs.com/package/@omit/react-fancy-switch\" target=\"_blank\"\u003e\u003cimg src=\"https://img.shields.io/npm/v/%40omit%2Freact-fancy-switch\" /\u003e\u003c/a\u003e\n\u003ca href=\"https://www.npmjs.com/package/@omit/react-fancy-switch\" target=\"_blank\"\u003e\u003cimg src=\"https://img.shields.io/npm/dw/%40omit%2Freact-fancy-switch\" /\u003e\u003c/a\u003e\n\u003ca href=\"https://github.com/umodoc/editor/commits\" target=\"_blank\"\u003e\u003cimg src=\"https://img.shields.io/npm/unpacked-size/%40omit%2Freact-fancy-switch\" /\u003e\u003c/a\u003e\n\u003c/p\u003e\n\n# React Fancy Switch\n\nReact Fancy Switch is a customizable React component that provides an elegant and interactive way to switch between multiple options. It's designed to be flexible, accessible, and easy to integrate into your React applications, all without requiring framer-motion.\n\n## Features\n\n- Supports both primitive (string/number/boolean) and object-based options\n- Customizable styling for radio buttons and highlighter\n- Accessible design with proper ARIA attributes\n- Smooth transition effects\n- Custom option rendering support\n\n## Installation\n\nTo use FancySwitch in your project, you can install it via npm:\n\n```bash\nnpm install @omit/react-fancy-switch\n```\n\n## Usage\n\nHere are examples of how to use the FancySwitch component with different types of option arrays:\n\n### 1. Array of Primitives (Strings, Numbers, or Booleans)\n\n```jsx\nimport React, { useState } from 'react'\nimport FancySwitch from '@omit/react-fancy-switch'\n\nconst StringExample = () =\u003e {\n  const [selectedOption, setSelectedOption] = useState('apple')\n\n  const options = ['apple', 'banana', 'cherry']\n\n  return (\n    \u003cFancySwitch\n      options={options}\n      value={selectedOption}\n      onChange={setSelectedOption}\n      className=\"some-class\"\n      radioClassName=\"radio-button\"\n      highlighterClassName=\"highlighter\"\n    /\u003e\n  )\n}\n```\n\n### 2. Array of Objects (Default Keys)\n\n```jsx\nimport React, { useState } from 'react'\nimport FancySwitch from '@omit/react-fancy-switch'\n\nconst DefaultObjectExample = () =\u003e {\n  const [selectedOption, setSelectedOption] = useState('option1')\n\n  const options = [\n    { value: 'option1', label: 'Option 1', disabled: false },\n    { value: 'option2', label: 'Option 2', disabled: true },\n    { value: 'option3', label: 'Option 3', disabled: false }\n  ]\n\n  return (\n    \u003cFancySwitch\n      options={options}\n      value={selectedOption}\n      onChange={setSelectedOption}\n      radioClassName=\"radio-button\"\n      highlighterClassName=\"highlighter\"\n    /\u003e\n  )\n}\n```\n\n### 3. Array of Objects (Custom Keys)\n\n```jsx\nimport React, { useState } from 'react'\nimport FancySwitch from '@omit/react-fancy-switch'\n\nconst CustomObjectExample = () =\u003e {\n  const [selectedOption, setSelectedOption] = useState(1)\n\n  const options = [\n    { id: 1, name: 'First Choice', isDisabled: false },\n    { id: 2, name: 'Second Choice', isDisabled: true },\n    { id: 3, name: 'Third Choice', isDisabled: false }\n  ]\n\n  return (\n    \u003cFancySwitch\n      options={options}\n      value={selectedOption}\n      onChange={setSelectedOption}\n      valueKey=\"id\"\n      labelKey=\"name\"\n      disabledKey=\"isDisabled\"\n      radioClassName=\"radio-button\"\n      highlighterClassName=\"highlighter\"\n    /\u003e\n  )\n}\n```\n\n### 4. Custom Option Rendering\n\n```jsx\nimport React, { useState } from 'react'\nimport FancySwitch from '@omit/react-fancy-switch'\n\nconst CustomRenderExample = () =\u003e {\n  const [selectedOption, setSelectedOption] = useState('option1')\n\n  const options = [\n    { value: 'option1', label: 'Option 1', icon: '🎉' },\n    { value: 'option2', label: 'Option 2', icon: '⭐' },\n    { value: 'option3', label: 'Option 3', icon: '🎨' }\n  ]\n\n  return (\n    \u003cFancySwitch\n      options={options}\n      value={selectedOption}\n      onChange={setSelectedOption}\n      renderOption={({ option, isSelected, getOptionProps }) =\u003e (\n        \u003cdiv {...getOptionProps()} className=\"flex items-center gap-2\"\u003e\n          \u003cspan\u003e{option.icon}\u003c/span\u003e\n          \u003cspan\u003e{option.label}\u003c/span\u003e\n        \u003c/div\u003e\n      )}\n    /\u003e\n  )\n}\n```\n\n## API\n\n### Props\n\n| Prop                       | Type                           | Default      | Description                                                      |\n| -------------------------- | ------------------------------ | ------------ | ---------------------------------------------------------------- |\n| `options`                  | `OptionType[]`                 | Required     | An array of options to display. Can be primitives or objects.    |\n| `value`                    | `OptionValue`                  | -            | The currently selected value.                                    |\n| `onChange`                 | `(value: OptionValue) =\u003e void` | -            | Callback function called when the selection changes.             |\n| `valueKey`                 | `string`                       | `'value'`    | The key to use for the option's value when using object options. |\n| `labelKey`                 | `string`                       | `'label'`    | The key to use for the option's label when using object options. |\n| `disabledKey`              | `string`                       | `'disabled'` | The key to use for the option's disabled state (object options). |\n| `radioClassName`           | `string`                       | -            | CSS class name for the radio button elements.                    |\n| `highlighterClassName`     | `string`                       | -            | CSS class name for the highlighter element.                      |\n| `highlighterIncludeMargin` | `boolean`                      | `false`      | Whether to include margins in highlighter size calculations.     |\n| `highlighterStyle`         | `React.CSSProperties`          | -            | Custom styles for the highlighter element.                       |\n| `disabledOptions`          | `OptionValue[]`                | `[]`         | An array of values for options that should be disabled.          |\n| `renderOption`             | `RenderOptionFunction`         | -            | Custom render function for options.                              |\n\nAdditional HTML attributes for the container div can be passed as props and will be spread onto the root element.\n\n## Styling\n\nThe FancySwitch component provides several ways to customize its appearance:\n\n1. Use the `className` prop to style the container div\n2. Use the `radioClassName` prop to style individual radio buttons\n3. Use the `highlighterClassName` prop to style the highlighter element\n4. Use the `highlighterStyle` prop to apply custom inline styles to the highlighter\n5. Use the `renderOption` prop for complete control over option rendering\n\nExample:\n\n```jsx\n\u003cFancySwitch\n  className=\"flex rounded-full bg-muted p-2\"\n  highlighterClassName=\"bg-primary rounded-full\"\n  radioClassName=\"relative mx-2 flex h-9 cursor-pointer items-center justify-center rounded-full px-3.5 text-sm font-medium transition-colors focus:outline-none data-[checked]:text-primary-foreground\"\n  highlighterIncludeMargin={true}\n  highlighterStyle={{ backgroundColor: 'blue', borderRadius: '8px' }}\n/\u003e\n```\n\n## Accessibility\n\nFancySwitch is built with accessibility in mind:\n\n- Uses semantic HTML with proper ARIA attributes\n- Supports keyboard navigation (arrow keys)\n- Manages focus states automatically\n- Includes a live region for screen reader announcements\n- Properly handles disabled states\n- Supports custom aria-labels through props\n\n## Other Projects\n\n- [Minimal Tiptap Editor](https://github.com/Aslam97/shadcn-minimal-tiptap)\n- [React Confirm Dialog](https://github.com/Aslam97/react-confirm-dialog)\n\n## License\n\nThis project is open source and available under the [MIT License](LICENSE).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faslam97%2Freact-fancy-switch","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Faslam97%2Freact-fancy-switch","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faslam97%2Freact-fancy-switch/lists"}