Inline styling for pseudo-classes,pseudo-elements, and animation on React components. With cssier, you can easily manage and apply custom styles for standard HTML and SVG elements, making your styling both dynamic and maintainable.
- Pre-built Components: Import ready-to-use React components for HTML and SVG tags.
- Advanced Styling: Use the
useStylesheethook to manage custom styles for pseudo-classes and pseudo-elements. - TypeScript Support: Includes TypeScript definitions for a smoother development experience.
- Storybook Integration: Automatically generates Storybook stories for visual testing and documentation.
- Public Storybook: Explore and interact with the components live at cssier.danberman.dev.
To install cssier, use npm, Yarn, or pnpm:
npm install cssieror with Yarn:
yarn add cssieror with pnpm:
pnpm add cssierYou can import pre-built React components for HTML and SVG tags from cssier/components:
import { Button } from 'cssier/components'
const MyComponent = () => (
const [count, setCount] = useState(0)
<div>
<Button pseudo={{
hover:{
background:['red','green','blue'][count%3],
transform:`scale(${1+count/10})`
}}} onClick={() => setCount(prev=>prev+1)}>Click Me</Button>
</div>
)The useStylesheet hook from cssier/hooks allows you to apply styles for pseudo-classes (:hover, :focus, etc.) and pseudo-elements (::before, ::after, etc.) directly to your components.
The useStylesheet hook returns an array where:
- The first element is a unique CSS class ID that can be applied to the component.
- The second element is a string of CSS styles that were injected into the document. This is useful for debugging, though you typically won't need to use it in production.
import { useStylesheet } from 'cssier/hooks'
const CustomComponent = (props) => {
const { className, pseudo, pseudoId: id, ...rest } = props
const [pseudoId, css] = useStylesheet(pseudo, id)
return (
<div {...rest} className={`${className ?? ''} pseudoId`}>
Styled with pseudo-classes and pseudo-elements!
</div>
)
}<CustomComponent
pseudo={{
hover: { backgroundColor: 'lightblue' },
focus: { outline: '2px solid blue' },
}}
pseudoId="custom-id"
>
Hover or focus on me!
</CustomComponent><CustomComponent
pseudo={{
before: { content: '"Prefix"', color: 'gray' },
after: { content: '"Suffix"', color: 'gray' },
}}
pseudoId="custom-id"
>
Content with pseudo-elements
</CustomComponent>Here's an example of using the <Button /> component from cssier to create a button that changes its hover color each time it is clicked:
import { useState } from 'react'
import { Button } from 'cssier/components'
const DynamicButton = () => {
const [colorIndex, setColorIndex] = useState(0)
const colors = ['lightblue', 'lightcoral', 'lightgreen', 'lightgoldenrodyellow']
const handleClick = () => {
setColorIndex((prevIndex) => (prevIndex + 1) % colors.length)
}
return (
<Button
pseudo={{
hover: { backgroundColor: colors[colorIndex] },
}}
onClick={handleClick}
>
Click me to change hover color!
</Button>
)
}The components provided by cssier accept all standard props for their HTML or SVG counterparts. For example, a <Button> component will accept props such as onClick, disabled, type, etc., just like a native HTML <button> element.
Explore and interact with the cssier components in our publicly available Storybook at cssier.danberman.dev. This is a great way to see the components in action and understand how different styles and props affect their appearance.
To contribute to cssier:
- Fork the repository.
- Create a new branch (
git checkout -b feature/your-feature). - Make your changes.
- Commit your changes (
git commit -am 'Add new feature'). - Push to the branch (
git push origin feature/your-feature). - Create a Pull Request on GitHub.
cssier is licensed under the ISC License. See the LICENSE file for more details.
- GitHub Repository – Source code and issue tracking.
- Storybook Documentation – Learn how to use Storybook with your components.
Thank you for choosing cssier! We hope it makes managing your styles more intuitive and flexible.