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