Skip to content

colingourlay/react-decoy

Repository files navigation

React Decoy

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!

NPM latest published version Formats: CommonJS, ECMAScript Modules


React Decoy Demo

Table of contents

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

Edit the previous code example on CodeSandbox

About the project

Credits

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