{"id":13421926,"url":"https://github.com/nkbt/react-collapse","last_synced_at":"2025-05-14T16:11:09.071Z","repository":{"id":1764758,"uuid":"44314962","full_name":"nkbt/react-collapse","owner":"nkbt","description":"Component-wrapper for collapse animation with react-motion for elements with variable (and dynamic) height","archived":false,"fork":false,"pushed_at":"2022-10-19T15:32:19.000Z","size":37648,"stargazers_count":1133,"open_issues_count":10,"forks_count":113,"subscribers_count":7,"default_branch":"master","last_synced_at":"2025-04-13T01:55:00.238Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"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/nkbt.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}},"created_at":"2015-10-15T12:10:12.000Z","updated_at":"2025-04-08T11:30:35.000Z","dependencies_parsed_at":"2022-07-17T02:00:34.006Z","dependency_job_id":null,"html_url":"https://github.com/nkbt/react-collapse","commit_stats":null,"previous_names":[],"tags_count":54,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nkbt%2Freact-collapse","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nkbt%2Freact-collapse/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nkbt%2Freact-collapse/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nkbt%2Freact-collapse/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/nkbt","download_url":"https://codeload.github.com/nkbt/react-collapse/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248654051,"owners_count":21140235,"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":[],"created_at":"2024-07-30T23:00:34.041Z","updated_at":"2025-04-13T01:55:21.122Z","avatar_url":"https://github.com/nkbt.png","language":"JavaScript","readme":"# react-collapse [![npm](https://img.shields.io/npm/v/react-collapse.svg?style=flat-square)](https://www.npmjs.com/package/react-collapse)\n\n[![Gitter](https://img.shields.io/gitter/room/nkbt/help.svg?style=flat-square)](https://gitter.im/nkbt/help)\n\n[![CircleCI](https://img.shields.io/circleci/project/nkbt/react-collapse.svg?style=flat-square\u0026label=nix-build)](https://circleci.com/gh/nkbt/react-collapse)\n[![Dependencies](https://img.shields.io/david/nkbt/react-collapse.svg?style=flat-square)](https://david-dm.org/nkbt/react-collapse)\n[![Dev Dependencies](https://img.shields.io/david/dev/nkbt/react-collapse.svg?style=flat-square)](https://david-dm.org/nkbt/react-collapse#info=devDependencies)\n\nComponent-wrapper for collapse animation for elements with variable (and dynamic) height\n\n![React Collapse](example/react-collapse.gif)\n\n## Demo\n\n[http://nkbt.github.io/react-collapse](http://nkbt.github.io/react-collapse)\n\n## Codepen demo\n\n[http://codepen.io/nkbt/pen/MarzEg](http://codepen.io/nkbt/pen/MarzEg?editors=101)\n\n## Installation\n\n### NPM\n\n```sh\nnpm install --save react-collapse\n```\n\n### yarn\n\n```sh\nyarn add react-collapse\n```\n\n### 1998 Script Tag:\n```html\n\u003cscript src=\"https://unpkg.com/react/umd/react.production.min.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"https://unpkg.com/react-collapse/build/react-collapse.min.js\"\u003e\u003c/script\u003e\n(Module exposed as `ReactCollapse`)\n```\n\n\n## Usage\n\n### 1. Add a CSS transition\n\n```css\n.ReactCollapse--collapse {\n  transition: height 500ms;\n}\n```\n\n**IMPORTANT**: Without adding a CSS transition there will be no animation and component will open/close instantly.\n\n### 2. Content is always mounted (default)\n\n```js\nimport {Collapse} from 'react-collapse';\n\n// ...\n\u003cCollapse isOpened={true || false}\u003e\n  \u003cdiv\u003eRandom content\u003c/div\u003e\n\u003c/Collapse\u003e\n```\n\n---\n\n### 3. Content unmounts when collapsed\n\nUse `Unmount` component provided as:\n\n```js\nimport {UnmountClosed} from 'react-collapse';\n\n// ...\n\u003cUnmountClosed isOpened={true || false}\u003e\n  \u003cdiv\u003eRandom content\u003c/div\u003e\n\u003c/UnmountClosed\u003e\n```\n\nExample [example/App/AutoUnmount.js](example/App/AutoUnmount.js)\n\n---\n\n### 4. Controlled and accessible\n\nIf you want a controlled and accessible implementation, check out this [example](example/App/Accessible.js)\n\n## Options\n\n\n### `isOpened`: PropTypes.boolean.isRequired\n\nExpands or collapses content.\n\n\n### `children`: PropTypes.node.isRequired\n\nOne or multiple children with static, variable or dynamic height.\n\n```js\n\u003cCollapse isOpened={true}\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=\"nyancat.gif\" /\u003e\n\u003c/Collapse\u003e\n```\n\n### `theme`: PropTypes.objectOf(PropTypes.string)\n\nIt is possible to set `className` for extra `div` elements that ReactCollapse creates.\n\nExample:\n```js\n\u003cCollapse theme={{collapse: 'foo', content: 'bar'}}\u003e\n  \u003cdiv\u003eCustomly animated container\u003c/div\u003e\n\u003c/Collapse\u003e\n```\n\nDefault values:\n```js\nconst theme = {\n  collapse: 'ReactCollapse--collapse',\n  content: 'ReactCollapse--content'\n}\n```\n\nWhich ends up in the following markup:\n```html\n\u003cdiv class=\"ReactCollapse--collapse\"\u003e\n  \u003cdiv class=\"ReactCollapse--content\"\u003e\n    {children}\n  \u003c/div\u003e\n\u003c/div\u003e\n```\n\n**IMPORTANT**: these are not style objects, but class names!\n\n\n### `onRest`, `onWork`: PropTypes.func\n\nCallback functions, triggered when animation has completed (`onRest`) or has just started (`onWork`)\n\nBoth functions are called with argument:\n```js\nconst arg = {\n  isFullyOpened: true || false, // `true` only when Collapse reached final height\n  isFullyClosed: true || false, // `true` only when Collapse is fully closed and height is zero\n  isOpened: true || false, // `true` if Collapse has any non-zero height\n  containerHeight: 123, // current pixel height of Collapse container (changes until reaches `contentHeight`)\n  contentHeight: 123 // determined height of supplied Content\n}\n```\n\n```js\n\u003cCollapse onRest={console.log} onWork={console.log}\u003e\n  \u003cdiv\u003eContainer text\u003c/div\u003e\n\u003c/Collapse\u003e\n```\n\nExample [example/App/Hooks.js](example/App/Hooks.js)\n\n### `initialStyle`: PropTypes.shape\n\n```js\ninitialStyle: PropTypes.shape({\n  height: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\n  overflow: PropTypes.string\n})\n```\n\nYou may control initial element style, for example to force initial animation from 0 to height by using `initialStyle={{height: '0px', overflow: 'hidden'}}`\n\n**IMPORTANT** Any updates to this prop will be ignored after first render.\nDefault value is determined based on initial `isOpened` value:\n```js\n  initialStyle = props.isOpened\n    ? {height: 'auto', overflow: 'initial'}\n    : {height: '0px', overflow: 'hidden'};\n```\n\nExample: [example/App/ForceInitialAnimation.js](example/App/ForceInitialAnimation.js)\n\n### `checkTimeout`: PropTypes.number\n\nNumber in `ms`.\n\nCollapse will check height after thins timeout to determine if animation is completed, the shorter the number - the faster `onRest` will be triggered and the quicker `height: auto` will be applied. The downside - more calculations.\nDefault value is: `50`.\n\n\n### Pass-through props\n\n**IMPORTANT** Collapse does not support any pass-through props, so any non-supported props will be ignored\n\nBecause we need to have control over when `Collapse` component is updated and it is not possible or very hard to achieve when any random props can be passed to the component.\n\n\n## Behaviour notes\n\n- initially opened Collapse elements will be statically rendered with no animation. You can override this behaviour by using `initialStyle` prop\n\n- due to the complexity of margins and their potentially collapsible nature, `ReactCollapse` does not support (vertical) margins on their children. It might lead to the animation \"jumping\" to its correct height at the end of expanding. To avoid this, use padding instead of margin.\n  See [#101](https://github.com/nkbt/react-collapse/issues/101) for more details\n\n\n## Migrating from `v4` to `v5`\n\n`v5` was another complete rewrite that happened quite a while ago, it was published as `@nkbt/react-collapse` and tested in real projects for a long time and now fully ready to be used.\n\nIn the most common scenario upgrade is trivial (add CSS transition to collapse element), but if you were using a few deprecated props - there might be some extra work required.\n\nLuckily almost every deprecated callback or prop has fully working analogue in `v5`. Unfortunately not all of them could maintain full backward compatibility, so please check this migration guide below.\n\n### 1. Change in behaviour\n\nNew Collapse does not implement animations anymore, it only determines `Content` height and updates `Collapse` wrapper height to match it.\nOnly after `Collapse` height reaches `Content` height (animation finished), Collapse's style is updated to have `height: auto; overflow: initial`.\n\nThe implications is that you will need to update your CSS with transition:\n```css\n.ReactCollapse--collapse {\n  transition: height 500ms;\n}\n```\n**IMPORTANT**: Without adding a CSS transition there will be no animation and component will open/close instantly.\n\n### 2. New props or updated props\n\n- `onRest`/`onWork` callbacks (see above for full description). Though `onRest` did exist previously, now it is called with arguments containing few operational params and flags.\n\n- `initialStyle` you may control initial element style, for example to force initial animation from 0 to height by using `initialStyle={{height: '0px', overflow: 'hidden'}}`\n    **IMPORTANT** Any updates to this prop will be ignored after first render.\n    Default value is:\n    ```js\n      initialStyle = props.isOpened\n        ? {height: 'auto', overflow: 'initial'}\n        : {height: '0px', overflow: 'hidden'};\n    ```\n\n- `checkTimeout` number in `ms`. Collapse will check height after thins timeout to determine if animation is completed, the shorter the number - the faster `onRest` will be triggered and the quicker `height: auto` will be applied. The downside - more calculations.\n    Default value is: `50`.\n\n### 3. Deprecated props (not available in `v5`)\n- ~~Pass-through props~~ - any unknown props passed to `Collapse` component will be ignored\n\n- ~~hasNestedCollapse~~ - no longer necessary, as v5 does not care if there are nested Collapse elements, see [example/App/Nested.js](example/App/Nested.js)\n\n- ~~fixedHeight~~ - no longer necessary, just set whatever height you need for content element and Collapse will work as expected, see [example/App/VariableHeight.js](example/App/VariableHeight.js)\n\n- ~~springConfig~~ - as new Collapse relies on simple CSS transitions (or your own implementation of animation) and does not use react-collapse, springConfig is no longer necessary. You can control control animation with css like\n    ```css\n    .ReactCollapse--collapse {\n      transition: height 500ms;\n    }\n    ```\n\n- ~~forceInitialAnimation~~ - you can use new prop `initialStyle={{height: '0px', overflow: 'hidden'}}` instead, so when new height will be set after component is rendered - it should naturally animate.\n\n- ~~onMeasure~~ - please use `onRest` and `onWork` instead and pick `contentHeight` from argument\n    ```js\n    \u003cCollapse\n      onRest={({contentHeight}) =\u003e console.log(contentHeight)}\n      onWork={({contentHeight}) =\u003e console.log(contentHeight)}\u003e\n      \u003cdiv\u003econtent\u003c/div\u003e\n    \u003c/Collapse\u003e\n    ```\n- ~~onRender~~ - since animations are fully controlled by external app (e.g. with CSS) we no draw each frame and do not actually re-render component anymore, so it is impossible to have `onRender` callback\n\n## Development and testing\n\nCurrently is being developed and tested with the latest stable `Node` on `OSX`.\n\nTo run example covering all `ReactCollapse` features, use `yarn start`, which will compile `example/Example.js`\n\n```bash\ngit clone git@github.com:nkbt/react-collapse.git\ncd react-collapse\nyarn install\nyarn start\n\n# then\nopen http://localhost:8080\n```\n\n## Tests\n\n```bash\n# to run ESLint check\nyarn lint\n\n# to run tests\nyarn test\n```\n\n## License\n\nMIT\n","funding_links":[],"categories":["UI Components","Uncategorized","Demos","\u003csummary\u003eUI Components\u003c/summary\u003e","JavaScript","React"],"sub_categories":["Collapse","Uncategorized","React Components"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnkbt%2Freact-collapse","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnkbt%2Freact-collapse","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnkbt%2Freact-collapse/lists"}