Filtering class name selectors

Example: Remove all but border* selectors and add font-bold selector:

Live Editor

// Button.tsx import { ClassNameProp, resolveClassName } from '@unwind/class-name'; import { memo, PropsWithChildren } from "react"; const buttonClassName = [ 'bg-gray-50 hover:bg-white active:bg-gray-200', 'border border-gray-300 rounded', 'py-2 px-4', ] type ButtonProps = PropsWithChildren<{ className?: ClassNameProp<typeof buttonClassName> }> const Button = memo<ButtonProps>(({ children, className }) => ( <button className={resolveClassName(null, buttonClassName, className)}> {children} </button> )) // App.tsx function App() { return ( <Button className={(state, provided) => [ ...provided.filter( selector => !selector.startsWith('border') ), 'font-bold', ]} > Click me! </Button> ) }

// Button.tsx
import { ClassNameProp, resolveClassName } from '@unwind/class-name';
import { memo, PropsWithChildren } from "react";

const buttonClassName = [
  'bg-gray-50 hover:bg-white active:bg-gray-200',
  'border border-gray-300 rounded',
  'py-2 px-4',
]

type ButtonProps = PropsWithChildren<{
  className?: ClassNameProp<typeof buttonClassName>
}>

const Button = memo<ButtonProps>(({ children, className }) => (
  <button className={resolveClassName(null, buttonClassName, className)}>
    {children}
  </button>
))

// App.tsx
function App() {
  return (
    <Button
      className={(state, provided) => [
        ...provided.filter(
          selector => !selector.startsWith('border')
        ),
        'font-bold',
      ]}
    >
      Click me!
    </Button>
  )
}

Result

Loading...