@syuchan1005/use-shared-transition

React hook for shared element transition

Install

npm install --save @syuchan1005/use-shared-transition

Usage

// index.tsx
const A: FC = () => {
  const ref = useRef();
  const refStyle = useSharedTransition('name', ref);
  return (
    <div ref={ref}>Text</div>
  );
};

const B: FC = () => {
  const ref = useRef();
  const refStyle = useSharedTransition('name', ref);
  return (
    <div ref={ref}>Text</div>
  );
};

const App: React.FC = () => (
  {/* react-router */}
  <BrowserRouter>
    <div>
      <Link to="/">A</Link>
      <Link to="/b">B</Link>
    </div>
    <Switch>
      <Route exact path="/" component={A} />
      <Route exact path="/b" component={B} />
    </Switch>
  </BrowserRouter>
);

License

MIT