@twocatmoon/react-use-class-state

useClassState

• useClassState(classStates: ClassStates): string

• Generates a space-separated list of CSS class names with modifiers, based on state. Keys containing the string {value} will be interpolated with the value of the state.

  example

  const [ isActive, setActive ] = useState(true)
  
  const classState = {
      'Button': {
          '--active': isActive,
          '--disabled': props.disabled,  // false
          '--color_{value}': props.color // red
      }
  }
  
  const className = useClassState(classState)
  // 'Button Button--active Button--color_red'
  

  Parameters

  • classStates: ClassStates

    Collection of CSS classes and modifiers

  Returns string

  • Class name