Skip to content

kitze/react-disable

master
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
src
 
 
 
 
 
 
 
 
 
 
 
 
 
 

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

About

A React component for disabling a section of an app

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Contributors 4

  •  
  •  
  •  
  •