react-mirror

Create synchronized replicas of a React DOM element

Usage no npm install needed!

<script type="module">
  import reactMirror from 'https://cdn.skypack.dev/react-mirror';
</script>

README

React Mirror

⚛️

NPM badge Dependabot badge Dependencies Build Status Coverage Status

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