{"id":13809289,"url":"https://github.com/Stanko/react-animate-height","last_synced_at":"2025-05-14T05:33:45.253Z","repository":{"id":38360231,"uuid":"83955009","full_name":"Stanko/react-animate-height","owner":"Stanko","description":"Lightweight React component for animating height using CSS transitions. Slide up/down the element, and animate it to any specific height.","archived":false,"fork":false,"pushed_at":"2023-11-10T09:54:26.000Z","size":1684,"stargazers_count":758,"open_issues_count":3,"forks_count":53,"subscribers_count":5,"default_branch":"v3","last_synced_at":"2024-11-18T02:45:23.562Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://muffinman.io/react-animate-height","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/Stanko.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE.md","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":"2017-03-05T08:12:42.000Z","updated_at":"2024-11-10T05:50:33.000Z","dependencies_parsed_at":"2024-06-18T12:16:44.261Z","dependency_job_id":"7665828c-0ae9-420f-9f22-a8746beb8628","html_url":"https://github.com/Stanko/react-animate-height","commit_stats":{"total_commits":144,"total_committers":18,"mean_commits":8.0,"dds":"0.27083333333333337","last_synced_commit":"e15f1ea4a4513455169e23b4daecb0b7ba586800"},"previous_names":[],"tags_count":36,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Stanko%2Freact-animate-height","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Stanko%2Freact-animate-height/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Stanko%2Freact-animate-height/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Stanko%2Freact-animate-height/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Stanko","download_url":"https://codeload.github.com/Stanko/react-animate-height/tar.gz/refs/heads/v3","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":225278014,"owners_count":17448809,"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-08-04T01:02:15.293Z","updated_at":"2024-11-19T01:31:09.916Z","avatar_url":"https://github.com/Stanko.png","language":"TypeScript","readme":"# React Animate Height\n\n[![npm version](https://img.shields.io/npm/v/react-animate-height.svg?style=flat-square)](https://www.npmjs.com/package/react-animate-height)\n[![npm downloads](https://img.shields.io/npm/dm/react-animate-height.svg?style=flat-square)](https://www.npmjs.com/package/react-animate-height)\n\nNo dependencies React component for animating height using CSS transitions.\nSlide an element up and down or animate it to any specific height.\nContent's opacity can be optionally animated as well (check `animateOpacity` prop bellow).\n\nCSS classes are applied in specific animation states, check `animationStateClasses` prop.\n\n[Changelog](CHANGELOG.md)\n\n### Version 3\n\nThis is version 3.x branch, rewritten to hooks, which means you'll need React version 16.8 or newer.\n\nFor version 2.x, check [v2 branch](https://github.com/Stanko/react-animate-height/tree/v2)\n\n#### Breaking changes:\n\n- Callback names changed (to avoid clashing with the native ones):\n  - `onAnimationStart` -\u003e `onHeightAnimationStart`\n  - `onAnimationEnd` -\u003e `onHeightAnimationEnd`\n\n## Demo\n\nLive demo: [muffinman.io/react-animate-height](https://muffinman.io/react-animate-height/)\n\nBecause multiple people asked how to animate list items, I created this [simple example](https://codesandbox.io/s/react-animated-list-example-made-using-react-animate-height-je9q1) for that as well.\n\nTo build the examples locally, run:\n\n```\nnpm install\nnpm start\n```\n\nThen open [`http://127.0.0.1:8000/`](http://127.0.0.1:8000/) in your browser of choice browser.\n\nOr play with this [sandbox](https://codesandbox.io/s/react-animate-height-v3-basic-example-ix6c5v).\n\n## Quick start\n\nGet it from npm\n\n```\n$ npm install --save react-animate-height\n```\n\nImport and use it in your React app.\n\n```jsx\nimport React, { useState } from 'react';\nimport AnimateHeight from 'react-animate-height';\n\nconst Example = () =\u003e {\n  const [height, setHeight] = useState(0);\n\n  return (\n    \u003cdiv\u003e\n      \u003cbutton\n        aria-expanded={height !== 0}\n        aria-controls=\"example-panel\"\n        onClick={() =\u003e setHeight(height === 0 ? 'auto' : 0)}\n      \u003e\n        {height === 0 ? 'Open' : 'Close'}\n      \u003c/button\u003e\n\n      \u003cAnimateHeight\n        id=\"example-panel\"\n        duration={500}\n        height={height} // see props documentation below\n      \u003e\n        \u003ch1\u003eYour content goes here\u003c/h1\u003e\n        \u003cp\u003ePut as many React or HTML components here.\u003c/p\u003e\n      \u003c/AnimateHeight\u003e\n    \u003c/div\u003e\n  );\n};\n```\n\n### Props\n\n- **height**: numeric or percentage value (ie. `'50%'`) or `'auto'`, required\n\n  When changed, element height will be animated to that height.\u003cbr/\u003e\n  To slide up use \u003ccode\u003e0\u003c/code\u003e, for slide down use \u003ccode\u003e'auto'\u003c/code\u003e\n\n- **duration**: integer, default: `500`\n\n  Duration of the animation in milliseconds\n\n- **delay**: integer, default: `0`\n\n  Animation delay in milliseconds\n\n- **easing**: string, default: `'ease'`\n\n  CSS easing function to be applied to the animation\n\n- **id**: string\n\n  HTML `id` attribute.\n\n- **className**: string\n\n  CSS class to be applied to the element\n\n  **Please note that you shouldn't apply properties that are messing with the layout (like `display`, `height`...), as these might break height calculations**\n\n- **ref**: `React.MutableRefObject\u003cHTMLDivElement | null\u003e`\n\n  Reference to the main div element.\n\n  ```tsx\n    const wrapperDiv = useRef\u003cHTMLDivElement | null\u003e(null);\n\n    \u003cAnimateHeight ref={wrapperDiv}\u003e\n  ```\n\n- **contentRef**: `React.MutableRefObject\u003cHTMLDivElement | null\u003e`\n\n  Reference to the content div element.\n\n  ```tsx\n    const contentDiv = useRef\u003cHTMLDivElement | null\u003e(null);\n\n    \u003cAnimateHeight contentRef={contentDiv}\u003e\n  ```\n\n- **style**: object\n\n  CSS style object, it will be merged with inline styles of the component\n\n  **Please note that you shouldn't apply properties that are messing with the layout (`display`, `height` are omitted from the type already), as these might break height calculations**\n\n- **contentClassName**: string\n\n  CSS class to be applied to content wrapper element\n\n  **Please note that you shouldn't apply properties that are messing with the layout (like `display`, `height`...), as these might break height calculations**\n\n- **animationStateClasses**: object\n\n  Object containing CSS class names for animation states, default:\n\n  ```\n  {\n    animating:                  'rah-animating',\n    animatingUp:                'rah-animating--up',\n    animatingDown:              'rah-animating--down',\n    static:                     'rah-static',\n    animatingToHeightZero:      'rah-animating--to-height-zero',\n    animatingToHeightAuto:      'rah-animating--to-height-auto',\n    animatingToHeightSpecific:  'rah-animating--to-height-specific',\n    staticHeightZero:           'rah-static--height-zero',\n    staticHeightAuto:           'rah-static--height-auto',\n    staticHeightSpecific:       'rah-static--height-specific',\n  }\n  ```\n\n  Please note that this one will be merged with the default object and cached when component is created,\n  so changing it afterwards will have no effect.\n\n- **onHeightAnimationStart**: function\n\n  Callback which will be called when animation starts.\n\n  This first argument passed to this callback is an object containing `newHeight`, the pixel value of the height at which the animation will end.\n\n- **onHeightAnimationEnd**: function\n\n  Callback which will be called when animation ends.\n\n  This first argument passed to this callback is an object containing `newHeight`, the pixel value of the height at which the animation ended.\n\n- **applyInlineTransitions**: boolean, default: `true`\n\n  If this flag is set to `false` only CSS classes will be applied to the element and inline\n  transition styles will not be present.\n\n- **animateOpacity**: boolean, default: `false`\n\n  If set to `true` content will fade-in (and fade-out) while height is animated.\n\n- **aria-hidden**: boolean\n\n  By default, library will set `aria-hidden` to `true` when height is zero. If you wish to override it, you can pass the prop yourself.\n\n- **disableDisplayNone**: boolean, default: `false`\n\n  By default, library will set `display: none` when height is zero. This prop allows you to disable that behavior and handle it yourself. It is useful when using [auto height](#user-content-animate-height-on-content-change), check [this issue](https://github.com/Stanko/react-animate-height/issues/16) for more info. Please be careful not to break accessibility when using this prop.\n\nAdditional props will be passed to the wrapper div, to make adding attrs like `aria-*` easier.\n\n## Accessibility\n\nLibrary will hide the content using `display: hidden` when height props is 0. It will also apply `aria-hidden=\"true\"` in the same case, but you can override it by passing `aria-hidden` prop yourself.\n\nWhen using a button to toggle height, make sure you add `aria-expanded` and `aria-controls` to make everything accessible. Here's an example:\n\n```jsx\n\u003cbutton\n  aria-expanded={ height !== 0 }\n  aria-controls=\"example-panel\" // it has to match the id passed to AnimateHeight\n  onClick={ toggleHeight } // your click handler that toggles height\n  // ... all other props\n\u003e\n  Toggle\n\u003c/button\u003e\n\n\u003cAnimateHeight id=\"example-panel\"\u003e\n  Content\n\u003c/AnimateHeight\u003e\n```\n\n### Reduced motion\n\nComponent checks for `prefers-reduced-motion` on start and disables animations if it is set to true. Please note that component doesn't listen for potential changes of `prefers-reduced-motion` option.\n\n## Animate height on content change\n\nIt is not built in, but you can use `AnimateHeight` and [ResizeObserver](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver) to automatically animate height on content change. I created a small example for you here:\n\n- [Source code](./docs/auto-height.tsx)\n- [Demo](https://muffinman.io/react-animate-height/#demo-3)\n\n## Gotchas\n\n### Collapsing margins\n\nWhile it is animating, component has `overflow: hidden`. When the animation is finished and height is set to \"auto\", `overflow: hidden` is removed. At that moment, any margins you have on the content inside `AnimateHeight` will collapse, causing content to \"jump\". To avoid this, just use padding inside the `AnimateHeight` instead of margins.\n\n### Bounded flexboxes\n\nIf `AnimateHeight` is a flex child and it's parent has a fixed height, animation won't work.\nTo fix this, you just need to add the following CSS rule to the `AnimateHeight` instance.\n\n```css\nflex-shrink: 0;\n```\n\nYou can do it by passing a `className` or directly in the `style` prop\n\n```jsx\n\u003cAnimateHeight style={{flexShrink: 0}}\u003e\n```\n\nCheck the [issue #89](https://github.com/Stanko/react-animate-height/issues/89) for the example and more details.\n\n## License\n\n[MIT](https://github.com/Stanko/react-animate-height/blob/master/LICENSE)\n","funding_links":[],"categories":["TypeScript","React"],"sub_categories":["React Components"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FStanko%2Freact-animate-height","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FStanko%2Freact-animate-height","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FStanko%2Freact-animate-height/lists"}