https://github.com/lfscamargo/styled-toolset
styled-components toolset to reduce duplicity
https://github.com/lfscamargo/styled-toolset
react styled-components typescript
Last synced: 12 months ago
JSON representation
styled-components toolset to reduce duplicity
- Host: GitHub
- URL: https://github.com/lfscamargo/styled-toolset
- Owner: LFSCamargo
- Created: 2021-02-17T05:19:05.000Z (over 5 years ago)
- Default Branch: main
- Last Pushed: 2021-02-17T23:29:35.000Z (over 5 years ago)
- Last Synced: 2025-07-01T05:41:11.013Z (about 1 year ago)
- Topics: react, styled-components, typescript
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/styled-toolset
- Size: 116 KB
- Stars: 7
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
Styled Components Toolset
Made to use with styled-components
# Styled components toolset
A cool library to reduce code duplicity inside styled-components
# Motivation
I saw those helpers inside a code from a friend of mine and he explained me the idea and i thinked why not implementing in a better way using better typing, functional patters using Ramda and Big.JS for safer math?
He already has a library with all of those helpers but has many more that i think that is not too helpful only for styled.
Thats why i created this library
# Docs
## Theme that is being used
Thats the theme that is used for all the examples
```ts
const theme = {
white: '#fff',
grey: '#eee',
};
```
## Get Theme
Get theme gets a value from the theme object
```ts
import { getTheme } from 'styled-toolset'
import styled from 'styled-components'
const white = getTheme('white')
const Wrapper = styled.div`
background-color: `${white}`
`;
```
## Get Property
Gets a property value from props and return it
```ts
import { getProperty } from 'styled-toolset';
import styled from 'styled-components';
const padding = getProperty('padding');
const Wrapper = styled.div<{ padding: number }>`
padding: ${padding}px;
`;
```
## Conditional Style
Gets a property value and check if its true of false and select what to render
### Using with plain values
```ts
import { conditionalStyle } from 'styled-toolset'
import styled from 'styled-components'
const padding = conditionalStyle('disabled')
const Wrapper = styled.div<{ disabled: boolean }>`
background-color: `${conditionalStyle('#fff', '#eee')}`
`;
```
### Using with theme variables
```ts
import { conditionalStyle } from 'styled-toolset'
import styled from 'styled-components'
const padding = conditionalStyle('disabled')
const white = getTheme('black')
const grey = getTheme('grey')
const Wrapper = styled.div<{ disabled: boolean }>`
background-color: `${conditionalStyle(white, grey)}`
`;
```
## PX to REM
A converter from pixes to rem. This is a bonus!
```ts
import { pxToRem } from 'styled-toolset'
import styled from 'styled-components'
const Wrapper = styled.div`
background-color: `${pxToRem(10)}`
`;
```
# Contributing
To contribute simply open a fork of this repo make the changes and open a pull request of your fork following our templates and passing the github actions workflows and also bumping to the latest version
## Releasing
To release a new version you need to bump the version of the project by incrementing the verision of the package.json and adding a new tag with the version bumped and the github actions wil handle the release
# Honorable Mentions
