Heinous scripts art coming to desecrate thy React-render'd elements, thee sayeth? Let thy mighty decoy face the wicked DOM defilers, that we may liveth to render anoth'r day!

---

Table of contents

• Getting started
• About the project

Getting started

npm install react-decoy

import React, { useState } from 'react';
import ReactDOM from 'react-dom';
import { Decoy } from 'react-decoy';

function ClickCounter() {
  const [count, setCount] = useState(0);
  const increment = () => setCount(count + 1);

  return (
    <p>
      <button onClick={increment}>↓</button>
      <code>{` = ${count}`}</code>
    </p>
  );
}

function App() {
  const [isActive, setIsActive] = useState(false);
  const toggle = () => setIsActive(!isActive);

  return (
    <div>
      <Decoy active={isActive}>
        <ClickCounter />
        <ClickCounter />
        <ClickCounter />
      </Decoy>
      <button onClick={toggle}>
        {`${isActive ? 'Dea' : 'A'}ctivate Decoy`}
      </button>
    </div>
  );
}

ReactDOM.render(<App />, document.getElementById('root'));

About the project

• React Decoy is currently maintained by Colin Gourlay
• It is currently licensed under The Unlicense
• If you'd like to help out, please submit ideas & bugs to the project's issue tracker
• To contribute code and documentation, please see the contribution guide
• All contributions and project activity are subject to the project's code of conduct

Credits

• Icon based on "Prop" by Luis Prado from the Noun Project