bhr / react-mirror

🪞 Create synchronized replicas of a React DOM element

React Mirror

Create synchronized replicas of a React DOM element

Usage

See equivalent uses of the hook and component below.

useMirror hook

import { useMirror } from 'react-mirror';

function App() {
  const [ref, reflection] = useMirror({ className: 'mirror-frame' });
  return (
    <>
      <div ref={ref} />
      {reflection}
    <>
  );
}

<Mirror /> component

import React from 'react';
import { Mirror } from 'react-mirror';

function App() {
  const [reflect, setReflect] = React.useState(null);
  return (
    <>
      <div ref={setReflect} />
      <Mirror reflect={reflect} className='mirror-frame'/>
    <>
  );
}

Demos

Using Portals

• Live Preview (codesandbox)(source)