{"repo":"szhsin/react-transition-state","free":true,"listed":false,"github":"https://github.com/szhsin/react-transition-state","clone":"git clone https://github.com/szhsin/react-transition-state.git","description":"Zero dependency React transition state machine","language":"TypeScript","stars":495,"topics":["react","animation","transition","component","hook","state-machine"],"license":"MIT","category":"ui-components","readme_excerpt":"React-Transition-State Zero dependency React transition state machine Live Demo Features Inspired by the React Transition Group, this tiny library helps you easily perform animations/transitions of your React component in a fully controlled manner, using a Hook API. - 🍭 Working with both CSS animation and transition. - 🔄 Moving React components in and out of DOM seamlessly. - 🚫 Using no derived state. - 🚀 Efficient: each state transition results in at most one extract render for consuming component. - 🤏 Tiny: 650B(post-treeshaking) and no dependencies, ideal for both component libraries and applications. 🤔 Not convinced? See a comparison with React Transition Group State diagram The initialEntered and mountOnEnter props are omitted from the diagram to keep it less convoluted. Please read more details at the API section. Install Usage CSS example Edit on CodeSandbox styled-components example Edit on CodeSandbox tailwindcss example Edit on CodeSandbox Switch transition You can create switch transition effects using one of the provided hooks, - useTransitionState if the number of elements participating in the switch transition is static. - useTransitionMap if the number of elements participating in the switch transition is dynamic and only known at runtime. Edit on CodeSandbox Perform appearing transition when page loads or a component mounts You can toggle on transition with the useEffect hook. Edit on CodeSandbox Comparisons with React Transition Group React Transition G","default_branch":null,"files":null,"tree":[],"storefront":"/r/szhsin","claimed":false,"request_supported":{"post":"https://gitbuyer.com/r/szhsin/react-transition-state/request-supported","requests":0},"note":"indexed from public GitHub; nothing is for sale on this page. Clone it from GitHub. Paid listings live at /search."}