{"id":26666680,"url":"https://github.com/taitounited/react-sheltr","last_synced_at":"2025-04-11T22:41:40.696Z","repository":{"id":57164359,"uuid":"135047556","full_name":"TaitoUnited/react-sheltr","owner":"TaitoUnited","description":"Shared element transition helper components for React","archived":false,"fork":false,"pushed_at":"2018-06-15T13:44:11.000Z","size":196,"stargazers_count":31,"open_issues_count":0,"forks_count":1,"subscribers_count":3,"default_branch":"master","last_synced_at":"2024-12-30T11:51:46.134Z","etag":null,"topics":["animation","reactjs","render-props","shared-element-transition"],"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/TaitoUnited.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-05-27T13:12:07.000Z","updated_at":"2023-06-13T13:00:44.000Z","dependencies_parsed_at":"2022-09-05T22:41:02.553Z","dependency_job_id":null,"html_url":"https://github.com/TaitoUnited/react-sheltr","commit_stats":null,"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TaitoUnited%2Freact-sheltr","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TaitoUnited%2Freact-sheltr/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TaitoUnited%2Freact-sheltr/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TaitoUnited%2Freact-sheltr/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/TaitoUnited","download_url":"https://codeload.github.com/TaitoUnited/react-sheltr/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248493022,"owners_count":21113159,"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":["animation","reactjs","render-props","shared-element-transition"],"created_at":"2025-03-25T18:36:31.264Z","updated_at":"2025-04-11T22:41:40.667Z","avatar_url":"https://github.com/TaitoUnited.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cp align='center'\u003e\n  \u003cbr\u003e\u003cbr\u003e\u003cbr\u003e\n  \u003cimg src=\"logo.png\" width=\"300\"/\u003e\n  \u003cbr\u003e\u003cbr\u003e\u003cbr\u003e\n\u003cp/\u003e\n\n# React Sheltr\n\n\u003e Shared Element Transitions (Sh El Tr -\u003e Sheltr) for your React applications.\n\n## Installation\n\n```sh\nnpm install @taito/react-sheltr\n```\n\n## Table of Contents\n\n* [What is it?](#what-is-it-)\n* [Usage](#usage)\n* [API Reference](#api-reference)\n* [Examples](#examples)\n\n## What is it?\n\nA shared element transition is a transition between two views where some\nelement common for both views is used to smoothly bridge the transition.\nIn practice there can be two (or more) different elements that are transformed\n(scaled and translated) so that it looks like one element that morphs from one state to the other.\n\nUnder the hood React Sheltr uses the [FLIP](https://aerotwist.com/blog/flip-your-animations/)\ntechnique to do the heavy lifting for calculating and animating the shared elements.\n\n## Usage\n\n### A word of caution!\n\nReact Sheltr uses the official Context API introduced in React v16.3.0\nso if you are using an older version of React than that then this module won't work 😕\n\n### Quickstart\n\nFirstly add Sheltr provider somewhere up in the view hierarchy tree just like you\nwould add your redux Provider or styled-components ThemeProvider.\nNote that it doesn't really need to be at the root level but somewhere above\nthe `SharedElement` components that are used later.\n\n```javascript\nimport Sheltr from '@taito/react-sheltr';\n\n\u003cSheltr\u003e\n  {/* other components go here */}\n\u003c/Sheltr\u003e\n```\n\nThen you can use `SharedElement` component to define and wire up your shared elements.\nThis component use the *render-prop* / *children as a function* pattern to expose\nnecessary props to the actual components that should be shared for the transition.\n\nHere we have two related image components: Component A that starts the transition flow when\nit is clicked, which is the default behaviour, and Component B when it's unmounted.\n\n```javascript\nimport { SharedElement } from '@taito/react-sheltr';\n\n// Component A\n\u003cSharedElement sharedId={id}\u003e\n  {sheltrProps =\u003e (\n    \u003cImageA {...sheltrProps} /\u003e\n  )}\n\u003c/SharedElement\u003e\n\n// Component B\n\u003cSharedElement sharedId={id} startOnUnmount\u003e\n  {sheltrProps =\u003e (\n    \u003cImageB {...sheltrProps} /\u003e\n  )}\n\u003c/SharedElement\u003e\n```\n\nIn some cases you might need to apply the individual `sheltrProps` to separate components\nor maybe compose them with some existing logic you have.\n\nFor this use case you can destruct the provided props and pick the ones you want.\nHowever, remember that you need to spread rest of the props to the component\nthat should be shared.\n\n```javascript\n\u003cSharedElement sharedId={id}\u003e\n  {({ onClick, ...rest }) =\u003e (\n    \u003cWrapper onClick={onClick}\u003e\n      \u003cImage {...rest} /\u003e\n    \u003c/Wrapper\u003e\n  )}\n\u003c/SharedElement\u003e\n\n// Or\n\n\u003cSharedElement sharedId={id}\u003e\n  {({ onClick, ...rest }) =\u003e (\n    \u003cWrapper onClick={() =\u003e {\n      this.handleClick(someData);\n      onClick();\n    }}\u003e\n      \u003cImage {...rest} /\u003e\n    \u003c/Wrapper\u003e\n  )}\n\u003c/SharedElement\u003e\n```\n\n### The HOC way\n\nIf you don't fancy the *render-prop* / *children as a function* pattern\nyou can use `withSheltr` Higher Order Component to gain access to the underlying\nAPI and manually handle things that `ShareElement` would do for you.\n\n```javascript\nimport { withSheltr } from '@taito/react-sheltr';\n\nclass ComponentA extends Component {\n  componentDidMount() {\n    this.props.sheltr.transition();\n  }\n\n  handleClick = id =\u003e {\n    this.props.sheltr.start(id);\n  };\n\n  render() {\n    const { items, sheltr } = this.props;\n    return (\n      \u003cWrapper\u003e\n        {items.map(item =\u003e {\n          return (\n            \u003cItem onClick={() =\u003e this.handleClick(item.id)}\u003e\n              \u003cThumbnail src={item.image} {...sheltr.getProps(item.id)} /\u003e\n              {/* other things... */}\n            \u003c/Item\u003e\n          );\n        })}\n      \u003c/Wrapper\u003e\n    );\n  }\n}\n\nexport default withSheltr(ComponentA);\n```\n\n```javascript\nimport { withSheltr } from '@taito/react-sheltr';\n\nclass ComponentB extends Component {\n  componentDidMount() {\n    this.props.sheltr.transition();\n  }\n\n  componentWillUnmount() {\n    this.props.sheltr.start(this.props.image.id);\n  }\n\n  render() {\n    const { image, sheltr } = this.props;\n    return (\n      \u003cWrapper\u003e\n        \u003cImg src={image.src} {...sheltr.getProps(image.id)} /\u003e\n        {/* other things... */}\n      \u003c/Wrapper\u003e\n    );\n  }\n}\n\nexport default withSheltr(ComponentB);\n```\n\n## API Reference\n\n`*` = required.\n\n### `\u003cSheltr /\u003e` (default export)\n\n| **Prop** | **Type** | **Default** | **Note** |\n|----------|----------|-------------|----------|\n| `delay` | `number` | `0`ms | The delay for all transition animations inside Sheltr provider.\n| `duration` | `number` | `400`ms | The duration for all transition animations inside Sheltr provider.\n| `easing` | `string` | `\"cubic-bezier(0.075, 0.82, 0.165, 1)\"` | Any valid css [transition timing function](https://www.w3schools.com/cssref/css3_pr_transition-timing-function.asp).\n\n### `\u003cSharedElement /\u003e`\n\n| **Prop** | **Type** | **Default** | **Note** |\n|----------|----------|-------------|----------|\n| `children`* | `func` | none |\n| `sharedId`* | `string` | none | A unique id between two shared elements.\n| `startOnClick` | `bool` | true | A flag telling SharedElement to provide a click handler to start the transition flow.\n| `startOnUnmount` | `bool` | false | A flag telling SharedElement to start the transition flow when the component unmounts.\n| `completeOnUnmount` | `bool` | false | A flag telling SharedElement to complete transition flow when the component unmounts (after handling `startOnUnmount` related actions.\n\n## Examples\n\nTo see more real-world-like examples that use `react-router` and `styled-components`\ncheck the **examples** folder for two quite common use cases for shared element transitions:\n\n- List view with thumbnail images that morph into the header of the clicked item's detail view.\n- Simple mosaic image gallery\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftaitounited%2Freact-sheltr","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftaitounited%2Freact-sheltr","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftaitounited%2Freact-sheltr/lists"}