{"id":22325761,"url":"https://github.com/kunukn/react-slide-toggle","last_synced_at":"2025-07-29T16:33:29.301Z","repository":{"id":27575641,"uuid":"114464153","full_name":"kunukn/react-slide-toggle","owner":"kunukn","description":"React component re-implementation for jQuery.slideToggle feature","archived":false,"fork":false,"pushed_at":"2022-12-10T16:51:26.000Z","size":3689,"stargazers_count":42,"open_issues_count":24,"forks_count":7,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-11-11T18:54:57.583Z","etag":null,"topics":["animation","collapsible","ease","react","toggle"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","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/kunukn.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-12-16T13:47:26.000Z","updated_at":"2022-06-16T17:53:21.000Z","dependencies_parsed_at":"2022-08-07T13:00:36.954Z","dependency_job_id":null,"html_url":"https://github.com/kunukn/react-slide-toggle","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kunukn%2Freact-slide-toggle","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kunukn%2Freact-slide-toggle/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kunukn%2Freact-slide-toggle/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kunukn%2Freact-slide-toggle/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/kunukn","download_url":"https://codeload.github.com/kunukn/react-slide-toggle/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":228030026,"owners_count":17858432,"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":["animation","collapsible","ease","react","toggle"],"created_at":"2024-12-04T02:13:35.886Z","updated_at":"2024-12-04T02:13:36.497Z","avatar_url":"https://github.com/kunukn.png","language":"JavaScript","readme":"## about\n\nReact version of jQuery.slideToggle. JavaScript animation where height is set on every requestAnimationFrame.\nThe toggle direction can be reversed during the movement.\n\n[![npm version](https://img.shields.io/npm/v/react-slide-toggle.svg?style=flat-square)](https://www.npmjs.com/package/react-slide-toggle)\n[![npm downloads](https://img.shields.io/npm/dm/react-slide-toggle.svg?style=flat-square)](https://www.npmjs.com/package/react-slide-toggle)\n[![gzip](https://img.shields.io/bundlephobia/minzip/react-slide-toggle.svg)](https://bundlephobia.com/result?p=react-slide-toggle)\n[![license](https://img.shields.io/github/license/kunukn/react-slide-toggle.svg)](https://github.com/kunukn/react-slide-toggle/blob/master/LICENSE)\n\nIf you are looking for a CSS transition based alternative, then use this instead\nhttps://github.com/kunukn/react-collapse\n\n## Supported React versions\n\n- React version 16.0+\n\n## demo\n\n- https://codepen.io/kunukn/full/wpepGz/ - cdn example\n- https://codesandbox.io/s/react-slide-toggle-y3tpn - npm example\n\n## size\n\n- UMD minified size ~7.8Kb (gzipped ~2.5Kb)\n\n## setup / local demo\n\n- git clone or download\n- npm install\n- npm start\n\n## info\n\nDefault easing is cubicInOut. You can reverse the toggle before the movement completes. Ease in-out works best visually when reverse toggling is to be used.\n\nThis should be A11Y friendly, you can test the tabindex by tabbing. The collapsed items should be skipped due to usage of display:none (inert functionality)\n\nJS animation is used for best animation control and possibility of adding interpolation or using advanged easing configuration which you can't with CSS alone. This triggers browser reflows on every requestAnimationFrame. If you have a very long page this might not be the best option to use.\n\n## usage example\n\nLook in App component for inspiration. Apply the styling as needed.\n\n### component example, simple - render prop\n\n```js\nimport SlideToggle from \"react-slide-toggle\";\n// or\n// const SlideToggle = require(\"react-slide-toggle\");\n\n// Apply optional padding to .my-collapsible__content-inner\n\u003cSlideToggle\n  render={({ toggle, setCollapsibleElement }) =\u003e (\n    \u003cdiv className=\"my-collapsible\"\u003e\n      \u003cbutton className=\"my-collapsible__toggle\" onClick={toggle}\u003e\n        toggle\n      \u003c/button\u003e\n      \u003cdiv className=\"my-collapsible__content\" ref={setCollapsibleElement}\u003e\n        \u003cdiv className=\"my-collapsible__content-inner\"\u003eCollapsible content\u003c/div\u003e\n      \u003c/div\u003e\n    \u003c/div\u003e\n  )}\n/\u003e;\n```\n\n### component example, simple - function as child\n\n```js\nimport SlideToggle from \"react-slide-toggle\";\n\n// Apply optional padding to .my-collapsible__content-inner\n\u003cSlideToggle\u003e\n  {({ toggle, setCollapsibleElement }) =\u003e (\n    \u003cdiv className=\"my-collapsible\"\u003e\n      \u003cbutton className=\"my-collapsible__toggle\" onClick={toggle}\u003e\n        toggle\n      \u003c/button\u003e\n      \u003cdiv className=\"my-collapsible__content\" ref={setCollapsibleElement}\u003e\n        \u003cdiv className=\"my-collapsible__content-inner\"\u003eCollapsible content\u003c/div\u003e\n      \u003c/div\u003e\n    \u003c/div\u003e\n  )}\n\u003c/SlideToggle\u003e;\n```\n\n### toggle state from outside example\n\n```js\nimport SlideToggle from \"react-slide-toggle\";\n\nclass MyComponent extends React.Component {\n  state = { toggleEvent: 0 };\n\n  onToggle = () =\u003e {\n    this.setState({ toggleEvent: Date.now() });\n  };\n\n  render() {\n    return (\n      \u003cdiv\u003e\n        \u003cbutton className=\"toggle\" onClick={this.onToggle}\u003e\n          Toggle\n        \u003c/button\u003e\n        \u003cSlideToggle toggleEvent={this.state.toggleEvent}\u003e\n          {({ setCollapsibleElement }) =\u003e (\n            \u003cdiv className=\"my-collapsible\"\u003e\n              \u003cdiv\n                className=\"my-collapsible__content\"\n                ref={setCollapsibleElement}\n              \u003e\n                \u003cdiv className=\"my-collapsible__content-inner\"\u003e\n                  Collapsible content\n                \u003c/div\u003e\n              \u003c/div\u003e\n            \u003c/div\u003e\n          )}\n        \u003c/SlideToggle\u003e\n      \u003c/div\u003e\n    );\n  }\n}\n```\n\n### component usage example with all options\n\n```js\nimport SlideToggle from \"react-slide-toggle\";\nimport BezierEasing from \"bezier-easing\"; // optional\n\nconst bezierEaseInOutQuart = BezierEasing(0.77, 0, 0.175, 1);\n\n\u003cSlideToggle\n  duration={280 /* default 300 */}\n  easeCollapse={bezierEaseInOutQuart /* default cubicInOut */}\n  easeExpand={bezierEaseInOutQuart /* default cubicInOut */}\n  collapsed /* default falsy */\n  irreversible /* default falsy */\n  noDisplayStyle /* default falsy */\n  noOverflowHidden /* default falsy */\n  bestPerformance /* default falsy */\n  whenReversedUseBackwardEase /* default falsy */\n  interpolateOnReverse /* default falsy */\n  offsetHeight /* default scrollHeight */\n  onExpanded={({ hasReversed }) =\u003e {\n    /* optional event hook */\n  }}\n  onExpanding={({ range, progress, hasReversed }) =\u003e {\n    /* optional event hook */\n  }}\n  onCollapsed={({ hasReversed }) =\u003e {\n    /* optional event hook */\n  }}\n  onCollapsing={({ range, progress, hasReversed }) =\u003e {\n    /* optional event hook */\n  }}\n  onMount={({ toggleState, toggle }) =\u003e {\n    /* optional event hook */\n  }}\n  onUnmount={({ toggleState }) =\u003e {\n    /* optional event hook */\n  }}\n  expandEvent /* default undefined */\n  collapseEvent /* default undefined */\n  toggleEvent /* default undefined */\n  render={({\n    toggle,\n    setCollapsibleElement,\n    toggleState,\n    isMoving,\n    hasReversed,\n    range /* linear value between [0 and 1] */,\n    progress /* easing result value between [0 and 1] */\n  }) =\u003e {\n    /* optional logic here */\n\n    /*\n      markup example\n      where setCollapsibleElement, toggle and progress are used\n    */\n    return (\n      \u003cdiv className=\"slide-toggle\"\u003e\n        \u003cdiv className=\"slide-toggle__header\"\u003e\n          \u003cbutton className=\"slide-toggle__button\" onClick={toggle}\u003e\n            toggle\n          \u003c/button\u003e\n        \u003c/div\u003e\n        \u003cdiv className=\"slide-toggle__box\" ref={setCollapsibleElement}\u003e\n          \u003cdiv\n            className=\"slide-toggle__box-inner\"\n            style={{ opacity: Math.max(0.5, progress) }}\n          \u003e\n            Collapsible content\n          \u003c/div\u003e\n        \u003c/div\u003e\n      \u003c/div\u003e\n    );\n  }}\n/\u003e;\n```\n\n## properties\n\n- duration - movement duration in milli seconds\n- easeCollapse - function which generates a value between [0 and 1]\n- easeExpand - function which generates a value between [0 and 1]\n- collapsed - start in collapsed mode\n- irreversible - you can't reverse direction during movement\n- noDisplayStyle - skip adding display:none on collapsed\n- noOverflowHidden - skip adding overflow:hidden on the collapsible element\n- bestPerformance - don't apply setState for every frame update. Disables range and progress update\n- whenReversedUseBackwardEase - play backwards on reverse toggling\n- interpolateOnReverse - avoid jumpy height changes when easeCollapse and easeExpand gives far different height position on reverse toggling.\n- onExpanded - event hook\n- onExpanding - event hook\n- onCollapsed - event hook\n- onCollapsing - event hook\n- onMount - event hook\n- onUnmount - event hook\n- render - render callback\n- children - render callback\n- offsetHeight - use offsetHeight HTML element calculation\n- expandEvent - update value to `Date.now()` to invoke a controlled expand\n- collapseEvent - update value to `Date.now()` to invoke a controlled collapse\n- toggleEvent - update value to `Date.now()` to invoke a controlled toggle\n\n## cdn\n\nhttps://unpkg.com/react-slide-toggle/\n\n```html\n\u003cscript src=\"https://unpkg.com/react-slide-toggle/dist/ReactSlideToggle.umd.js\"\u003e\n  \u003cscript\u003e\n  \u003cscript\u003e\n  var SlideToggle = window.ReactSlideToggle;\n\u003c/script\u003e\n```\n\n## npm\n\nhttps://www.npmjs.com/package/react-slide-toggle\n\n## provide your own markup\n\nThe component provides the functionality.\nMinimum requirement is to bind the collapsible element with `setCollapsibleElement`.\nUse the `toggle` function to toggle the collapsible element.\n\n## provide your own easing functions\n\nLook for examples in the App component\n\n```js\nimport eases from \"eases\";\nimport BezierEasing from \"bezier-easing\";\n```\n\nTo minimize the component size, no default easing library has been added.\n\nYou can see examples of JS-easing library usage here\n\n- eases https://codepen.io/kunukn/full/mpVJOm/\n- BezierEasing https://codepen.io/kunukn/full/YYNqyj/\n\n## design goals\n\n- flexible - provide your own markup, styling and easing\n- interruptible - can be reversed during movement\n- simple api with event hooks\n- inert - when collapsed you should tab over the collapsed component\n- minimal in size\n- availability - from cdn or npm install\n- generate range and progress [0;1] values which can be used for further custom animation\n- JS is used over CSS transition on purpose to enable possible interpolation or other custom math calculations\n\n## library implementation details\n\n- Used life-cycle are `componentWillUnmount` and `render`\n- Extends `React.Component`\n- Uses `setState`\n\n## local development\n\n- git clone or download\n- npm install\n- npm run build\n- The build files are now in the dist folder\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkunukn%2Freact-slide-toggle","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkunukn%2Freact-slide-toggle","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkunukn%2Freact-slide-toggle/lists"}