Awesome
React With Class 😎
Utility methods to create primitive components with a set of classes, props or variants.
- Define easily usable and manageable primitive components
- A great addition to Tailwind and React
- Type-safe
- Supports class composition using clsx
Installation
- Install the package
npm install react-with-class
or
yarn add react-with-class
or
pnpm install react-with-class
Usage
// The first argument is the component that will get rendered.
// You can use any of the built-in html tags or any custom component, as long as it takes in `className` as a prop.
const Button = withClass('button', {
// Those classes will always be applied.
// You can pass any value that clsx allows (which includes strings, string arrays, objects, etc. - check their readme for more info)
// You can also pass a function that receives the props as argument and returns the classes
classes: 'text-white font-bold py-2 px-4 rounded flex-1',
// Those will get applied conditionally, depending on the value of the provided prop - see usage example bellow
variants: {
color: {
danger: 'bg-red-600 hover:bg-red-700 focus:ring-red-500',
primary: 'text-white bg-indigo-600 hover:bg-indigo-700 focus:ring-indigo-500',
secondary: 'border-gray-300 bg-white text-gray-700 hover:bg-gray-50 focus:ring-indigo-500',
},
// You can define boolean properties by using `true` or `false` as keys.
// Anything truthy will pass as true and vice-versa
isGhost: {
true: 'bg-opacity-50',
},
},
// Variants that will get applied if no variant props are supplied in a key:value form
defaultVariants: {
color: 'primary',
},
// Other props that will always be passed down
otherProps: {
type: 'button',
},
})
Then use the component everywhere around your app
<Button className="ml-2" color="danger" isGhost />