{"id":13496381,"url":"https://github.com/kunukn/react-collapse","last_synced_at":"2025-04-12T14:57:54.415Z","repository":{"id":39558592,"uuid":"163971000","full_name":"kunukn/react-collapse","owner":"kunukn","description":"Component-wrapper for collapse animation with CSS for elements with variable and dynamic height","archived":false,"fork":false,"pushed_at":"2024-09-23T23:52:11.000Z","size":3203,"stargazers_count":164,"open_issues_count":2,"forks_count":18,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-04-12T14:57:49.687Z","etag":null,"topics":["accordion","codepen","codesandbox","collapsible","css-transition","react"],"latest_commit_sha":null,"homepage":"","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/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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2019-01-03T12:35:57.000Z","updated_at":"2024-10-10T09:33:53.000Z","dependencies_parsed_at":"2024-05-01T21:10:16.174Z","dependency_job_id":null,"html_url":"https://github.com/kunukn/react-collapse","commit_stats":{"total_commits":386,"total_committers":5,"mean_commits":77.2,"dds":0.07512953367875652,"last_synced_commit":"0f26b84c49f3ea63dc61c4190eac2cac64c92eb4"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kunukn%2Freact-collapse","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kunukn%2Freact-collapse/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kunukn%2Freact-collapse/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kunukn%2Freact-collapse/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/kunukn","download_url":"https://codeload.github.com/kunukn/react-collapse/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248586249,"owners_count":21128997,"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":["accordion","codepen","codesandbox","collapsible","css-transition","react"],"created_at":"2024-07-31T19:01:47.087Z","updated_at":"2025-04-12T14:57:54.396Z","avatar_url":"https://github.com/kunukn.png","language":"TypeScript","readme":"# react-collapse\n\nCollapse component with CSS transition for elements with variable and dynamic height.\n\n[![npm version](https://img.shields.io/npm/v/@kunukn/react-collapse.svg?style=flat-square)](https://www.npmjs.com/package/@kunukn/react-collapse)\n[![npm downloads](https://img.shields.io/npm/dm/@kunukn/react-collapse.svg?style=flat-square)](https://www.npmjs.com/package/@kunukn/react-collapse)\n[![gzip](https://img.shields.io/bundlephobia/minzip/@kunukn/react-collapse.svg)](https://bundlephobia.com/result?p=@kunukn/react-collapse)\n[![license](https://img.shields.io/github/license/kunukn/react-collapse.svg)](https://github.com/kunukn/react-collapse/blob/master/LICENSE)\n\nreact-collapse\n\n![logo](logo/collapse.svg 'logo')\n\n# Demo\n\n- \u003ca href=\"https://codepen.io/kunukn/full/ebMryW\" target=\"_blank\"\u003esimple - codepen\u003c/a\u003e\n\n- \u003ca href=\"https://codepen.io/kunukn/full/xmjRNo\" target=\"_blank\"\u003eaccordion - codepen\u003c/a\u003e\n\n- \u003ca href=\"https://codepen.io/kunukn/full/JwmEYL\" target=\"_blank\"\u003eread more - codepen\u003c/a\u003e\n\n- \u003ca href=\"https://stackblitz.com/edit/vitejs-vite-qfvnck\" target=\"_blank\"\u003esimple - edit stackblitz\u003c/a\u003e\n\n- \u003ca href=\"https://codesandbox.io/s/k1439yw2v5\" target=\"_blank\"\u003ecodesandbox - collapsibles\u003c/a\u003e\n\n- \u003ca href=\"https://codesandbox.io/s/react-collapse-expand-all-collapse-all-0h4mc\"\u003ecodesandbox expand-all\u003c/a\u003e\n\n- \u003ca href=\"https://codesandbox.io/s/collapse-with-emotion-css-prototype-euqy2\"\u003ecodesandbox CSS-in-JS integration example\u003c/a\u003e\n\n- \u003ca href=\"https://kunukn.github.io/react-collapse\" target=\"_blank\"\u003eview storybook\u003c/a\u003e\n\n# CSS required\n\n:warning: ️You need to add style (transition) in your own stylesheet to add animation. Here is an example.\n\n```html\n\u003cstyle\u003e\n  .collapse-css-transition {\n    transition: height 280ms cubic-bezier(0.4, 0, 0.2, 1);\n  }\n\u003c/style\u003e\n```\n\nAlternatively, you can add it using the `transition` prop.\n\n## Installation for React 16.8+\n\n- UMD minified ~2.3 kb, gzipped ~1.1 kb\n- Module minified ~2.9 kb, gzipped ~1.1 kb\n- CJS minified ~2.0 kb, gzipped ~1.0 kb\n\n```bash\nnpm i -D @kunukn/react-collapse\n# or\n# yarn add -D @kunukn/react-collapse\n```\n\n## Installation for React 16.3+\n\nAvoid it if possible. This is no longer maintained.\n\n- UMD minified ~5.8 kb, gzipped ~2.1 kb\n\n```bash\nnpm i -D @kunukn/react-collapse@^1\n# or\n# yarn add -D @kunukn/react-collapse@^1\n```\n\nMinimal toggle content component example.\n\n```jsx\n// Notice how you import it, changed since ver 3.\nimport { Collapse } from '@kunukn/react-collapse'\nimport React from 'react'\n\nexport default function MyComponent() {\n  const [isOpen, setIsOpen] = React.useState(false)\n  const onToggle = () =\u003e setIsOpen((s) =\u003e !s)\n\n  return (\n    \u003cdiv className=\"my-component\"\u003e\n      \u003cbutton onClick={onToggle}\u003e Toggle \u003c/button\u003e\n      \u003cCollapse\n        isOpen={isOpen}\n        transition=\"height 300ms cubic-bezier(0.4, 0, 0.2, 1)\"\n      \u003e\n        \u003cp\u003e Hello world \u003c/p\u003e\n      \u003c/Collapse\u003e\n    \u003c/div\u003e\n  )\n}\n```\n\n```jsx\n// The possible imports\n\nimport { Collapse } from '@kunukn/react-collapse' // UMD\nimport '@kunukn/react-collapse/dist/react-collapse.css' // CSS\nimport type { CollapseProps } from '@kunukn/react-collapse/dist/react-collapse.d.ts' // TS\nconst { Collapse } = require('@kunukn/react-collapse/dist/react-collapse.cjs') // CommonJS\n```\n\n## Properties\n\n| Prop               | Type             | Default                 |\n| ------------------ | ---------------- | ----------------------- |\n| isOpen             | boolean          | false                   |\n| children           | node \\| function |                         |\n| render             | function         |                         |\n| className          | string           | collapse-css-transition |\n| transition         | string           |                         |\n| elementType        | string           | div                     |\n| collapseHeight     | string           | 0px                     |\n| onChange           | function         |                         |\n| onInit             | function         |                         |\n| addState           | boolean          | false                   |\n| noAnim             | boolean          | false                   |\n| overflowOnExpanded | boolean          | false                   |\n\n\u003cbr\u003e\n\n#### `isOpen` : boolean\n\nExpands or collapses content.\n\n#### `children` : node | function\n\nRender the children.\n\n```jsx\nconst MyComponent = ({ isOpen }) =\u003e (\n  \u003cCollapse isOpen={isOpen}\u003e\n    \u003cp\u003eParagraph of text.\u003c/p\u003e\n    \u003cp\u003eAnother paragraph is also OK.\u003c/p\u003e\n    \u003cp\u003eImages and any other content are ok too.\u003c/p\u003e\n    \u003cimg src=\"cutecat.gif\" /\u003e\n  \u003c/Collapse\u003e\n)\n```\n\nRender content using the [render-props pattern](https://reactjs.org/docs/render-props.html).\n\n```jsx\nconst MyComponent = ({ isOpen }) =\u003e (\n  \u003cCollapse isOpen={isOpen}\u003e\n    {(state) =\u003e (\n      \u003cdiv className={`using-collapse-state-to-add-css-class ${state}`}\u003e\n        \u003cp\u003eI know the collapse state: {state}\u003c/p\u003e\n      \u003c/div\u003e\n    )}\n  \u003c/Collapse\u003e\n)\n```\n\n#### `render` : function\n\nRender content using the render-props pattern.\n\n```jsx\nconst MyComponent = ({ isOpen }) =\u003e {\n  const render = (state) =\u003e (\n    \u003cdiv className={`using-collapse-state-to-add-css-class ${state}`}\u003e\n      \u003cp\u003eI know the collapse state: {state}\u003c/p\u003e\n    \u003c/div\u003e\n  )\n  return \u003cCollapse isOpen={isOpen} render={render} /\u003e\n}\n```\n\nThere are four possible collapse states: `collapsed`, `collapsing`, `expanded`, `expanding`.\n\n#### `className` : string\n\nYou can specify a custom className. The default value is `collapse-css-transition`. Remember to add CSS transition if a className is provided.\n\n#### `transition` : string\n\nYou can also specify a CSS transition inline by using the `transition` prop.\n\n```jsx\nconst MyComponent = ({ isOpen, duration = '290ms' }) =\u003e (\n  \u003cCollapse\n    transition={`height ${duration} cubic-bezier(.4, 0, .2, 1)`}\n    isOpen={isOpen}\n  \u003e\n    \u003cp\u003eParagraph of text\u003c/p\u003e\n  \u003c/Collapse\u003e\n)\n```\n\n#### `elementType` : string\n\nYou can specify the HTML element type for the collapse component. By default, the element type is a `div` element.\n\n```jsx\nconst MyComponent = ({ isOpen }) =\u003e (\n  \u003cCollapse elementType=\"article\" isOpen={isOpen}\u003e\n    \u003cp\u003eParagraph of text inside an article element\u003c/p\u003e\n  \u003c/Collapse\u003e\n)\n```\n\n#### `collapseHeight` : string\n\nYou can specify the collapse height in CSS unit to partially show some content.\n\n```jsx\nconst MyComponent = ({ isOpen }) =\u003e (\n  \u003cCollapse collapseHeight=\"40px\" isOpen={isOpen}\u003e\n    \u003cp\u003eA long paragraph of text inside an article element\u003c/p\u003e\n  \u003c/Collapse\u003e\n)\n```\n\n#### `onChange` : function\n\nCallback function for when the transition changes.\n\n```jsx\nconst MyComponent = ({ isOpen }) =\u003e {\n  const onChange = ({ state, style }) =\u003e {\n    /*\n    state: string = the state of the collapse component.\n    style: object = styles that are applied to the component.\n  */\n  }\n\n  return (\n    \u003cCollapse onChange={onChange} isOpen={isOpen}\u003e\n      \u003cp\u003eA long paragraph of text inside an article element\u003c/p\u003e\n    \u003c/Collapse\u003e\n  )\n}\n```\n\n#### `onInit` : function\n\nSimilar to onChange but only invoked on DOM mounted.\u003cbr/\u003e\nThis is an example that starts collapsed and expands on mount.\n\n```jsx\nconst MyComponent = () =\u003e {\n  const [isOpen, setIsOpen] = React.useState(false)\n\n  const onInit = ({ state, style, node }) =\u003e {\n    /*\n       node: HTMLElement = the DOM node of the component.\n    */\n\n    setIsOpen(true)\n  }\n\n  return (\n    \u003cdiv\u003e\n      \u003cbutton onClick={() =\u003e setIsOpen((state) =\u003e !state)}\u003e Toggle \u003c/button\u003e\n      \u003cCollapse onInit={onInit} isOpen={isOpen}\u003e\n        \u003cp\u003eA long paragraph of text inside an article element\u003c/p\u003e\n      \u003c/Collapse\u003e\n    \u003c/div\u003e\n  )\n}\n```\n\n#### `addState` : boolean\n\nIf added, then one of the class names will be appended to the component depending on the state.\n\n```\n--c-collapsed\n--c-collapsing\n--c-expanded\n--c-expanding\n```\n\n#### `noAnim` : boolean\n\nIf added, then there will be no collapse animation. State changes between `collapsed` and `expanded`.\n\n#### `overflowOnExpanded` : boolean\n\nIf added, then `overflow: hidden` style will not be added when the state is `expanded`.\n\n#### Custom props\n\n`Collapse` applies custom props such as `aria-` and `data-` attributes to the component's rendered DOM element. For example, this can be used to set the `aria-hidden` attribute:\n\n```jsx\nconst MyComponent = ({ isOpen }) =\u003e (\n  \u003cCollapse aria-hidden={isOpen ? 'false' : 'true'} isOpen={isOpen}\u003e\n    \u003cp\u003eParagraph of text\u003c/p\u003e\n  \u003c/Collapse\u003e\n)\n```\n\nOr you could specify a specific transitionDuration.\n\n```jsx\nconst collapseStyles = { transitionDuration: '270ms' }\n\nconst MyComponent = ({ isOpen }) =\u003e (\n  \u003cCollapse style={collapseStyles} isOpen={isOpen}\u003e\n    \u003cp\u003eParagraph of text\u003c/p\u003e\n  \u003c/Collapse\u003e\n)\n```\n\n## Development\n\nTo run development\n\n`npm start`\n\n```bash\ngit clone [repo]\ncd [repo]\nnpm i\nnpm start\n```\n\n- To develop and play around: `npm start`\n- To build the bundle: `npm run build`\n\n# CDN\n\nhttps://unpkg.com/@kunukn/react-collapse/\n\n```html\n\u003clink\n  rel=\"stylesheet\"\n  href=\"https://unpkg.com/@kunukn/react-collapse/dist/react-collapse.css\"\n/\u003e\n\u003c!-- UMD --\u003e\n\u003cscript src=\"https://unpkg.com/@kunukn/react-collapse\"\u003e\u003c/script\u003e\n```\n\n# NPM\n\nhttps://www.npmjs.com/package/@kunukn/react-collapse\n\n# Supported browsers\n\nModern browsers (Edge, Firefox, Chrome, Safari, etc).\n\n# Supported React versions\n\n- React version 16.3+ : use Collapse version 1\n- React version 16.8+ : use Collapse version 2+\n\n# Used React 16.3 life-cycles\n\n- **render** (uses the style states to invoke CSS transition)\n- **componentDidMount** (initial expanded or collapsed state)\n- **getDerivedStateFromProps** (detect if isOpen props have changed and apply a new collapse state)\n- **componentDidUpdate** (update style states from the four possible collapse states)\n\n# Used React 16.8+ hooks\n\n- **useState**\n- **useEffect**\n- **useRef**\n- **useCallback**\n- **useReducer**\n\n# Design goals\n\n- let the browser handle the animation using CSS height transition\n- minimal in file size\n- minimalistic API - only have a Collapse component which updates on isOpen props\n- flexible - provide your own markup, styling and easing\n- interruptible - can be reversed during movement\n- inert - when collapsed you should tab over the collapsed component\n- availability - from cdn or npm install\n- collapsible on height only\n\n# This was created with heavy inspiration from\n\n[https://github.com/SparebankenVest/react-css-collapse](https://github.com/SparebankenVest/react-css-collapse) 🎆\n\n# A version also exists for Vue\n\nhttps://github.com/kunukn/vue-height-collapsible\n","funding_links":[],"categories":["TypeScript","UI Utilities"],"sub_categories":["Syntax highlighting"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkunukn%2Freact-collapse","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkunukn%2Freact-collapse","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkunukn%2Freact-collapse/lists"}