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

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

Honorable Mentions