{"id":13515542,"url":"https://github.com/codecks-io/react-flip-primitives","last_synced_at":"2025-03-31T04:37:11.408Z","repository":{"id":34044808,"uuid":"154162881","full_name":"codecks-io/react-flip-primitives","owner":"codecks-io","description":"Building Blocks for Blazing Fast CSS based Animations","archived":false,"fork":false,"pushed_at":"2023-01-04T21:45:29.000Z","size":1834,"stargazers_count":3,"open_issues_count":23,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-13T06:08:51.550Z","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":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/codecks-io.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-10-22T14:56:22.000Z","updated_at":"2021-11-16T12:50:24.000Z","dependencies_parsed_at":"2023-01-15T04:11:17.653Z","dependency_job_id":null,"html_url":"https://github.com/codecks-io/react-flip-primitives","commit_stats":null,"previous_names":["danielberndt/react-flip-primitives"],"tags_count":22,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codecks-io%2Freact-flip-primitives","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codecks-io%2Freact-flip-primitives/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codecks-io%2Freact-flip-primitives/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codecks-io%2Freact-flip-primitives/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/codecks-io","download_url":"https://codeload.github.com/codecks-io/react-flip-primitives/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246418674,"owners_count":20773935,"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-01T05:01:12.689Z","updated_at":"2025-03-31T04:37:09.803Z","avatar_url":"https://github.com/codecks-io.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"# React Flip Primitives\n\n## Installation\n\n```bash\nnpm install react-flip-primitives\n```\n\n## Usage\n\nHere's a simple and a more complex example\n\n```jsx\nimport FlipGroup from \"react-flip-primitives\";\n\n\u003cFlipGroup changeKey={isActive}\u003e\n  {registerNode =\u003e (\n    \u003cdiv\u003e\n      \u003cdiv ref={registerNode(\"text\")} style={{height: isActive ? \"auto\" : 0}}\u003e\n        Text\n      \u003c/div\u003e\n      \u003cbutton ref={registerNode(\"button\")} onClick={toggle}\u003e\n        Toggle\n      \u003c/button\u003e\n    \u003c/div\u003e\n  )}\n\u003c/FlipGroup\u003e;\n```\n\n```jsx\nimport FlipGroup from \"react-flip-primitives\";\n\n\u003cFlipGroup changeKey={isActive} keysAndData={users.map(u =\u003e ({key: u.id, data: u}))}\u003e\n  {(registerNode, keysAndData) =\u003e (\n    \u003cdiv\u003e\n      {keysAndData.map(kd =\u003e (\n        \u003cAvatar\n          key={kd.key}\n          user={kd.data}\n          ref={registerNode(kd.key, {\n            enterPosition: {transform: \"translate(0, -20px)\"},\n            leavePosition: {transform: \"translate(0, 20px)\"},\n            onPresence: presence =\u003e ({opacity: presence}),\n          })}\n        /\u003e\n      ))}\n      \u003cbutton ref={registerNode(\"button\")}\u003eAdd\u003c/button\u003e\n    \u003c/div\u003e\n  )}\n\u003c/FlipGroup\u003e;\n```\n\n## Features\n\n- Follows the advice outlined in this [google developer post](https://developers.google.com/web/updates/2017/03/performant-expand-and-collapse).\n- All transitions are based on spring-physics.\n- Allow enter and leave animations inspired by `react-motion`'s [`TransitionMotion`](https://github.com/chenglou/react-motion#transitionmotion-).\n- Fairly small. Including all its dependencies it weighs in at `~9KB minifed` or `~3KB` gzipped.\n- Doesn't animate size changes (yet), only focusses on position changes.\n- Minimizes layout thrashing by batching all layout read and write operations.\n\n## Api\n\n### FlipGroup\n\nThe `FlipGroup` manages all nodes that are affected by a specific state change. The state change needs to be incorporated into a `changeKey` to notify the FlipGroup that it should check the registered node's position before the update is applied and after. If the identity of the changeKey changes, `getSnapshotBeforeUpdate` is called measuring all present flip nodes, and applying smooth transitions to get to the positions determined by `componentDidUpdate`. (Trivia: since there's no React hook for `getSnapshotBeforeUpdate` yet, this library still relies on an old school class component).\n\n#### Props\n\n- **`changeKey={any}`**\n\n  **Required.** Whenever this key changes, it'll check the position of all connected nodes before the DOM update, and after and will perform the necessary transitions.\n\n- **`keysAndData={{key, data}[]}`**\n\n  This prop expects an array of `{key, data}` pairs that are currently available. Once a new key is entered, it will perform an enter transition. Once a key is not present anymore, this key will perform a leave transition.\n\n- **`children={(registerNode, presentKeysAndData) =\u003e ReactNode}`**\n\n  `FlipGroup`'s uses a render prop to register all nodes that are affected when the `changeKey` is changed.\n  If you're using enter and leave transitions, you need to use the keys and data provided by `presentKeysAndData`. This array of `{key, data}` objects contains all the currently visible keys and will differ from the `keysAndData` you passed in as a prop if a node is in the process of leaving.\n\n### FlipGroup's `registerNode(key, opts)`\n\n- **`key`**\n\n  A key for the node that is unique within it's `FlipGroup`\n\n- **`opts.enterPosition={style}`**\n\n  typically something like `{enterPosition: {transform: 'translate(-10,0) scale(0.5)'}}`. Note that the passed style object should only contain styles affecting the position of the element. For styling e.g. position, use the `onPresence` callback\n\n- **`opts.leavePosition={style}`**\n\n  typically something like `{enterPosition: {transform: 'translate(-10,0) scale(0.5)'}}`. Note that the passed style object should only contain styles affecting the position of the element. For styling e.g. position, use the `onPresence` callback\n\n- **`opts.positionSpringConfig={...springConfig, noPointerEvents: boolean}`**\n  defaults to `{mass: 1, tension: 170, friction: 26, precision: 0.1, noPointerEvents: false}`\n\n  Setting `noPointerEvents` to `true` will set `pointer-events: none` to a node whose position is currently animated.\n\n* **`opts.onPresence={(presence) =\u003e style}`**\n\n  typically something like `(val) =\u003e ({opacity: val})`. `val` will be `0` when entering and will target `1` via spring physics. When leaving, `val` will target `0`.\n\n* **`opts.presenceSpringConfig={springConfig}`**\n  defaults to `{mass: 1, tension: 170, friction: 26, precision: 0.1}`\n\n* **`opts.parentFlipKey={string}`**\n\n  Cancels out a parent's transforms. If the current node lies within another `registerNode` we need to notify the FlipGroup that the parent's transforms need to be considered as well.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcodecks-io%2Freact-flip-primitives","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcodecks-io%2Freact-flip-primitives","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcodecks-io%2Freact-flip-primitives/lists"}