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, mirror] = useMirror({ className: 'mirror-frame' });
  return (
    <>
      <div ref={ref} />
      {mirror}
    </>
  );
}

<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' />
    </>
  );
}

<Window /> component

You can also render a reflection, with all the styles needed, in a separate window using the magic of Portals 🌀

import React from 'react';
import { FrameStyles, Reflection, Window } from 'react-mirror';

function App() {
  const [reflect, setReflect] = React.useState(null);
  return (
    <>
      <div ref={setReflect} />
      <Window>
        <FrameStyles />
        <Reflection real={reflect} style={{ pointerEvents: "none" }} />
      </Window>
    </>
  );
}

Demos

Using Portals

• Live Preview (source) (codesandbox)