🙅‍♂️ react-disable

Other projects by @thekitze

• 💻 Sizzy - A browser for developers and designers
• 🏫 React Academy - Interactive React and GraphQL workshops
• 💌 Twizzy - A standalone app for Twitter DM
• 🤖 JSUI - A powerful UI toolkit for managing JavaScript apps

Demo

Usage

yarn add react-disable

Just wrap any children with the Disable component in order to disable the section. The disabled sections are also aware if a parent is disabled, so they will be disabled, but the styles won't be duplicated (the opacity won't be multiplied, etc.)

import { Disable } from 'react-disable';

const App = () => {
  const [disableForm, setDisableForm] = React.useState(false);
  const toggle = () => setDisableForm(d => !d);

  return (
    <div>
      <h1>Hello world</h1>
      <button onClick={toggle}>toggle disable form</button>

      <Disable disabled={disableForm}>
        <h3>Login form </h3>
        <input placeholder="username" type="text" />
        <input placeholder="password" type="text" />
        <button>submit</button>
      </Disable>

    </div>
  );
};