react-collapsed React自定义钩子支持灵活可访问的展开/折叠动画
React 的折叠动画的自定义钩子，用起来还挺顺手的。react-collapsed 这个库了一个叫 useCollapse 的 Hook，用来做 展开/折叠 动画，重点是支持 height: auto 的情况，动画不会卡，过渡也挺自然。
动画直接靠 CSS 搞定，不依赖额外库，响应也快。最贴心的一点，它把可访问性（accessibility）那部分也一并了，ARIA 属性都帮你自动加上了，你就专心管 UI 就行。
用法也清爽，调用 useCollapse 后，它会返回一堆你需要绑定到 DOM 上的 props，你可以随意搭配你自己的组件结构和样式风格。比如说你想做一个 FAQ 折叠列表，那真的是几行代码就搞定。
对了，库是用 TypeScript 写的，类型提示也比较完整，开发体验还不错。安装也就是 yarn add react-collapsed 或 npm i react-collapsed，常规操作。
如果你经常做交互丰富的前端界面，又想避免手写一堆状态控制和动画细节，这个 Hook 可以试试，灵活又靠谱。
文件大小：297.63KB
评论区