styles-build
v10.3.3
Published
Una librería de estilos para React
Downloads
156
Readme
Styles Build
A React styling library that helps you organize your CSS with a styled-components-like API.
Installation
npm i styles-build@latest
yarn add styles-build@latest
pnpm add styles-build@latest
Features
- 🎨 Styled components with clean syntax
- ✨ Animation support out of the box
- 🔄 Dynamic styles with props
- 📦 TypeScript support
- 🎯 Zero dependencies
Basic Usage
JavaScript Example
import { styled } from 'styles-build';
// Simple styled component
const Button = styled('button')({
styles: `
background-color: blue;
color: white;
padding: 10px 20px;
border-radius: 4px;
`
});
// With animations
const AnimatedButton = styled('button')({
styles: `
background-color: purple;
color: white;
padding: 10px 20px;
`,
animation: {
animationStyle: `
@keyframes bounce {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-10px); }
}
`,
duration: '1s',
infinite: true
}
});
// Dynamic styles with props
const DynamicButton = styled('button')({
styles: (props) => `
background-color: ${props.primary ? 'blue' : 'gray'};
color: white;
`
});
TypeScript Example
import { styled } from 'styles-build';
interface StyledProps {
primary?: boolean;
}
const Button = styled('button')<StyledProps>({
styles: `
background-color: ${(props) => props.primary ? 'blue' : 'gray'};
color: white;
padding: 10px 20px;
`
});
const AnimatedHeading = styled('h1')({
animation: {
duration: '2s',
timingFunction: 'ease-in-out',
infinite: true,
animationStyle: `
@keyframes pulse {
0% { transform: scale(1); }
50% { transform: scale(1.1); }
100% { transform: scale(1); }
}
`
},
styles: `
color: #333;
font-size: 2rem;
`
});
Animation Options
{
animationStyle: string; // @keyframes definition
duration?: string; // Default: '2s'
timingFunction?: string; // Default: 'linear'
delay?: string; // Default: '0s'
infinite?: boolean; // Default: false
iterationCount?: number; // Default: 1
}