styled-toolset v1.1.0
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
const theme = {
white: '#fff',
grey: '#eee',
};
Get Theme
Get theme gets a value from the theme object
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
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
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
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!
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