Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/welingtonms/classy
No more applying conditional CSS classes or styles manually! This library helps you handle assigning style that relies on multiple combinations of props or conditionals.
https://github.com/welingtonms/classy
classy conditional conditional-statements conditional-styling css-in-js react styled-components
Last synced: 7 days ago
JSON representation
No more applying conditional CSS classes or styles manually! This library helps you handle assigning style that relies on multiple combinations of props or conditionals.
- Host: GitHub
- URL: https://github.com/welingtonms/classy
- Owner: welingtonms
- License: mit
- Created: 2021-01-27T16:38:42.000Z (almost 4 years ago)
- Default Branch: main
- Last Pushed: 2023-02-04T12:03:23.000Z (almost 2 years ago)
- Last Synced: 2024-10-15T03:03:53.040Z (about 1 month ago)
- Topics: classy, conditional, conditional-statements, conditional-styling, css-in-js, react, styled-components
- Language: TypeScript
- Homepage:
- Size: 1.1 MB
- Stars: 1
- Watchers: 2
- Forks: 0
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# classy
This library helps you to handle assigning style that relies on multiple combinations of `props` or conditionals.
[](https://coveralls.io/github/welingtonms/classy)
[](https://www.npmjs.com/package/@welingtonms/classy)
## What problem do we want to solve here?
Let's suppose you have some good old conditional classes to be applied to an element:
```jsx
My Cool Button
```
You could write:
```jsx
import { classy } from '@welingtonms/classy';
My Cool Button
;
```
Or, let's say you have a React component with props such as `colorScheme`, `variant`, `validationStatus`, `disabled`, and so on.
If you dare to style your component conditionally according to these props, you would have to write something like:
```jsx
import clsx from 'clsx'
const { colorScheme, variant, validationStatus, disabled } = props
My Cool Button
```
Well, what if you could write something like:
```jsx
import useClassy from '@welingtonms/classy'
const { prop, classy } = useClassy(props)
const { disabled } = props
My Cool Button
```
Cool, huh?!
Or if you were using some CSS-in-JS library like [`styled-components`](https://styled-components.com/), you would have something like:
```jsx
import styled from 'styled-components';
const Button = styled.button`
background: ${ ( { variant, scheme } ) => ( {
'$button-primary-background': variant == 'primary',
'$button-secondary-background':
variant == 'secondary' && scheme == 'light',
'$button-secondary-dark-background':
variant == 'secondary' && scheme == 'dark',
'$button-terciary-background': variant == 'terciary',
} ) };
border-color: ${ ( { variant, scheme } ) => ( {
'$button-primary-border-color': variant == 'primary',
'$button-secondary-border-color':
variant == 'secondary' && scheme == 'light',
'$button-secondary-dark-border-color':
variant == 'secondary' && scheme == 'dark',
'$button-terciary-border-color': variant == 'terciary',
} ) };
color: ${ ( { variant, scheme } ) => ( {
'$button-primary-color': variant == 'primary',
'$button-secondary-color': variant == 'secondary' && scheme == 'light',
'$button-secondary-dark-color':
variant == 'secondary' && scheme == 'dark',
'$button-terciary-color': variant == 'terciary',
} ) };
`;
```
Well, what about something simpler like:
```jsx
import { classier, prop } from '@welingtonms/classy';
const Button = styled.button`
background: ${ classier( {
'$button-primary-background': prop( { variant: 'primary' } ),
'$button-secondary-background': prop( {
variant: 'secondary',
scheme: 'light',
} ),
'$button-secondary-dark-background': prop( {
variant: 'secondary',
scheme: 'dark',
} ),
'$button-terciary-background': prop( { variant: 'terciary' } ),
} ) };
border-color: ${ classier( {
'$button-primary-border-color': prop( { variant: 'primary' } ),
'$button-secondary-border-color': prop( {
variant: 'secondary',
scheme: 'light',
} ),
'$button-secondary-dark-border-color': prop( {
variant: 'secondary',
scheme: 'dark',
} ),
'$button-terciary-border-color': prop( { variant: 'terciary' } ),
} ) };
color: ${ classier( {
'$button-primary-color': prop( { variant: 'primary' } ),
'$button-secondary-color': prop( {
variant: 'secondary',
scheme: 'light',
} ),
'$button-secondary-dark-color': prop( {
variant: 'secondary',
scheme: 'dark',
} ),
'$button-terciary-color': prop( { variant: 'terciary' } ),
} ) };
`;
```
`classy` gives you more power to represent conditionals and helps you declutter your styling, making it more purposeful.