React Class State Hook

Automatically generate CSS class names and modifiers based on your component's state.
Explore the docs »

Report Bug · Request Feature

Table of Contents

1. About The Project
   • Built With
2. Installation
3. Usage
4. Contributing
5. License
6. Contact
7. Acknowledgments

About The Project

Use the useClassState hook to generate CSS class names and modifiers based on the passed in state:

const [ isActive, setActive ] = useState(true)

const classState = {
    'Button': {
        '--active': isActive,
        '--disabled': props.disabled,  // disabled = false
        '--color_{value}': props.color // color = 'red'
    }
}

const className = useClassState(classState)
// 'Button Button--active Button--color_red'

(back to top)

Built With

React.js TypeScript Vite TypeDoc

(back to top)

Installation

1. Install from NPM

   npm i @twocatmoon/react-use-class-state

2. Include in your project

   import { useClassState } from '@twocatmoon/react-use-class-state'

(back to top)

Usage

Please refer to the Documentation

(back to top)

Contributing

Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated.

If you have a suggestion that would make this better, please fork the repo and create a pull request. You can also simply open an issue with the tag "enhancement". Don't forget to give the project a star! Thanks again!

1. Fork the Project
2. Create your Feature Branch (git checkout -b feature/AmazingFeature)
3. Commit your Changes (git commit -m 'Add some AmazingFeature')
4. Push to the Branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

(back to top)

License

Distributed under the MIT License. See LICENSE for more information.

(back to top)

Contact

Twitter - @twocatmoon

Project Link - https://github.com/twocatmoon/react-use-class-state

(back to top)

Acknowledgments

Best-README-Template

(back to top)