react-mirror's Introduction

React Mirror

Create synchronized replicas of a React DOM element

Suggested alternative for non react usage mirror-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)

react-mirror's People

Contributors

Stargazers

Watchers

react-mirror's Issues

TailwindCSS3 PostCSS Compatibility

Describe the bug
When using TailwindCSS3 with postcss the package wont work. A Error stating "The provided selector is empty" is thrown.

To Reproduce
Steps to reproduce the behavior:

Pull this Git: Link
meteor npm install --save
meteor npm start
See error in Console

Expected behavior
Displayed Reflect Component

Screenshots

Desktop (please complete the following information):

OS: Windows 10
Browser Chrome
Version [e.g. 22]

Any suggestions would be much appreciated. Also commenting this line will display the app

Copy applied styles from real element user action pseudo classes to reflection

Describe the bug
A clear and concise description of what the bug is.

To Reproduce
Steps to reproduce the behavior:

Clone repo
cd ./demo
make start
Hover over the real element input field, it get highlighted in blue border
This blue border does not get reflected

Expected behavior
The blue border shows up in reflection; same with all other pseudo class state styles
i.e. active, hover, focus, focus-visible, focus-within

Screenshots