A React component for disabling a section of an app

Made by Kitze
kitze.io · X · YouTube

Zero To Shipped A full-stack starter kit for web and mobile apps.	Sotto Voice-to-text for macOS. Local AI, one-time purchase.	Tinkerer Club A private community for builders, self-hosters, and AI tinkerers.
Sizzy The browser for web developers.	Supermac A macOS command center for everyday workflows.	DMX A focused desktop client for X.

Postiz Schedule social posts with AI agents.	FounderStack A SaaS stack for your business, without subscriptions.	Matte 3D mockups, screen recordings, and video editing.
HTML/CSS to Image Turn HTML/CSS into images, PDFs, and screenshots.	NameMyVenti Get your brand shouted out at Starbucks.

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

All projects · GitHub · Follow on X · YouTube