React Class State Hook - Automatically generate CSS class names and modifiers based on your component's state

Overview

Contributors Forks Stargazers Issues MIT License


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

You might also like...
React Hook for accessing state and dispatch from a Redux store

redux-react-hook React hook for accessing mapped state and dispatch from a Redux store. Table of Contents Install Quick Start Usage StoreContext useMa

Collection of hook-based memoized selector factories for declarations outside of render.

react-selector-hooks Collection of hook-based memoized selector factories for declarations outside of render. Motivation Reusing existing functions. I

A hook-based multistep wizard library with vast control over the logic of the user as per use-case.
A hook-based multistep wizard library with vast control over the logic of the user as per use-case.

A hooks-based multistep wizard (what I call it a machine 😻 ) built for React which is flexible and easy to use. Huge shout out to jcmcneal for the Re

A hook based project created during 20-Dec week ReactJS workshop

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

A small ~1kb, Hook-based library for creating Reactive-UI in Vanilla.

Vanic A small, Hook-based library for creating Reactive-UI in Vanilla. Features Reactive-UI. Hooks. No compiler and build-tool required. Jsx & literal

:tada: React Universal Hooks : just use****** everywhere (Functional or Class Component). Support React DevTools!
:tada: React Universal Hooks : just use****** everywhere (Functional or Class Component). Support React DevTools!

react-universal-hooks React Universal Hooks : just use****** everywhere. Support React = 16.8.0 Installation Using npm: $ npm install --save react-un

React Hook for state management with profunctor lenses

Profunctor State Hook React Hook for state management with Profunctor Optics A simple and small (2KB!) approach to state management in React using fun

React Hook for managing state in URL query parameters with easy serialization.

useQueryParams A React Hook, HOC, and Render Props solution for managing state in URL query parameters with easy serialization. Works with React Route

React hook for managing GDPR cookie consent state.

useCookieConsent Disclaimer Although code in this repository is oriented to satisfy GDPR cookie rules, neither author nor contributors to this reposit

Owner
Two-Cat Moon
Makers of interactive digital media for the web. Apps, video games, and more.
Two-Cat Moon
Flexible React Hook to automatically update navigation based on scroll position

react-use-scrollspy Installation react-use-scrollyspy is a React Hook which requires React 16.8.0 or later. // yarn yarn add react-use-scrollspy // or

Patrick Puritscher 256 Sep 17, 2022
A react hook which lets you automatically synchronize a value to a server with react-query

useReactQueryAutoSync A helpful react hook for building interfaces which require autosave. Read more about the motivation and design in the original b

Luke Murray 20 Jul 20, 2022
useMedia React hook to track CSS media query state

use-media useMedia React sensor hook that tracks state of a CSS media query. Install You can install use-media with npm npm install --save use-media o

Vadim Dalecky 490 Sep 30, 2022
BitAboutState - Tiny and powerful React hook-based state management library

?? Tiny and powerful React hook-based state management library. 100% Idiomatic React.

null 53 Aug 9, 2022
🍙 Lightweight (600B minified + gzipped) React Hook to subscribe to a subset of your single app state.

?? useSubstate Lightweight (<600B minified + gzipped) React Hook to subscribe to a subset of your single app state. function Component() { const [su

Philipp Spiess 99 Apr 18, 2022
🎸 React Hook to use realtime last.fm data and display your currently played song in your application.

Stream your currently playing song through last.fm as a React hook. Features ?? Tiny: use-last-fm weighs in at less than 700 bytes minified and gzippe

Alistair Smith 97 Sep 24, 2022
Keep-react-hook-form - A lib to store react-hook-form values in session storage

Keep-react-hook-form - A lib to store react-hook-form values in session storage

Christopher 1 Jan 27, 2022
use css in js with react hook.

style-hook easy to write dynamic css features use css in react hook easy to get started install use npm npm i -S style-hook or use yarn yarn add style

null 16 Mar 5, 2022
💫 Tiny and powerful hook-based event system for React

BitAboutEvent ?? Tiny and powerful hook-based event system for React. 100% Idiomatic React.

BitAbout 23 Aug 21, 2022
📄 React hook for managing forms and inputs state

react-use-form-state ?? Table of Contents Motivation Getting Started Examples Basic Usage Initial State Global Handlers Advanced Input Options Custom

Waseem Dahman 941 Sep 27, 2022