https://github.com/kitze/react-disable

A React component for disabling a section of an app
https://github.com/kitze/react-disable

Last synced: 6 days ago
JSON representation

A React component for disabling a section of an app

• Host: GitHub
• URL: https://github.com/kitze/react-disable
• Owner: kitze
• License: mit
• Created: 2019-11-19T12:43:46.000Z (almost 5 years ago)
• Default Branch: master
• Last Pushed: 2023-01-05T01:12:42.000Z (almost 2 years ago)
• Last Synced: 2024-08-03T11:09:38.597Z (3 months ago)
• Language: TypeScript
• Size: 520 KB
• Stars: 78
• Watchers: 3
• Forks: 3
• Open Issues: 18
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# 🙅‍♂️ react-disable

### Other projects by [@thekitze](https://twitter.com/thekitze)

- 💻 [Sizzy](https://sizzy.co) - A browser for developers and designers

- 🏫 [React Academy](https://reactacademy.io) - Interactive React and GraphQL workshops

- 💌 [Twizzy](https://twizzy.app) - A standalone app for Twitter DM

- 🤖 [JSUI](https://github.com/kitze/JSUI) - A powerful UI toolkit for managing JavaScript apps

---

## Demo

![demo](https://i.imgur.com/9D6Xeps.gif)

## 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.)

```jsx

import { Disable } from 'react-disable';

const App = () => {

  const [disableForm, setDisableForm] = React.useState(false);

  const toggle = () => setDisableForm(d => !d);

  return (

    


      
Hello world

      toggle disable form


      

        
Login form 

        

        

        submit

      


    

  );

};

```