Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/codebayu/style-variants
The Package for creating dynamic and reusable styles in React Native
https://github.com/codebayu/style-variants
react-native style variants
Last synced: 3 months ago
JSON representation
The Package for creating dynamic and reusable styles in React Native
- Host: GitHub
- URL: https://github.com/codebayu/style-variants
- Owner: codebayu
- License: mit
- Created: 2024-04-20T10:46:31.000Z (9 months ago)
- Default Branch: main
- Last Pushed: 2024-06-30T17:37:36.000Z (7 months ago)
- Last Synced: 2024-10-09T02:08:26.229Z (4 months ago)
- Topics: react-native, style, variants
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/@codebayu/style-variants
- Size: 233 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
# @codebayu/style-variants
The Package for creating dynamic and reusable styles in React Native App
## Installation
```bash
# npm
npm install @codebayu/style-variants
# yarn
yarn add @codebayu/style-variants
```
## Usage
```tsx
// ReusableButton.tsx
import { sv } from '@codebayu/style-variants';
export default function ReusableButton({
children,
color,
size,
style,
...rest
}) {
const buttonStyle = buttonVariant({ color, size });
const textStyle = textVariant({ color, size });
return (
{children}
);
}
const textVariant = sv({
base: {
fontWeight: '600',
},
variants: {
color: {
primary: {
color: 'green',
},
secondary: {
color: 'blue',
},
ghost: {
color: 'black',
},
},
size: {
small: {
fontSize: 14,
},
medium: {
fontSize: 16,
},
large: {
fontSize: 18,
},
},
},
defaultVariants: {
color: 'primary',
size: 'medium',
},
});
const buttonVariant = sv({
base: {
height: 'auto',
alignItems: 'center',
},
variants: {
color: {
primary: {
backgroundColor: '#eee',
padding: 17,
fontWeight: '600',
borderRadius: 5,
width: '100%',
borderWidth: 1,
borderColor: '#eee',
},
secondary: {
backgroundColor: '#e3e3e3',
padding: 17,
fontWeight: '600',
borderRadius: 5,
width: '100%',
borderWidth: 1,
borderColor: '#eee',
},
ghost: {
backgroundColor: 'transparent',
},
},
},
defaultVariants: {
color: 'primary',
},
});
// Parent Component
Sign Up Here
;
```
## License
This project is licensed under the [MIT License](https://opensource.org/licenses/MIT) - see the [LICENSE](LICENSE) file for details.