Skip to content
A React component for disabling a section of an app
TypeScript HTML
Branch: master
Clone or download
kitze Merge pull request #1 from hyanmandian/feature/improve-accessibility-…
…typings

Improve accessibility, typings and add test
Latest commit 99f08da Nov 25, 2019

README.md

🙅‍♂️ 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

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>
  );
};
You can’t perform that action at this time.