props-to-styled

Transform custom props of your styled components to styles

Usage no npm install needed!

<script type="module">
  import propsToStyled from 'https://cdn.skypack.dev/props-to-styled';
</script>

README

props-to-styled

Build Status Coverage Status npm version Greenkeeper badge

Transform custom props of your styled components to styles.

Installation

NPM

npm install --save props-to-styled

Usage

Using this:

<CustomComponent fixed="top">
    Fixed to top of the page
</CustomComponent>

<CustomComponent fixed="bottom">
    Fixed to bottom of the page
</CustomComponent>

import styled from 'styled-components';
import { fixed } from 'props-to-styled';

const CustomComponent = styled.div`
    ${fixed};
`

the result is similar to:

<div style="position: fixed; top: 0; bottom: inherit; left: 0; right: 0;">
    Fixed to top of the page
</div>

<div style="position: fixed; top: inherit; bottom: 0; left: 0; right: 0;">
    Fixed to bottom of the page
</div>

you can use also propTypes:

import PropTypes from 'prop-types';
import styled from 'styled-components';
import { fixed, fixedPropTypes } from 'props-to-styled';

const CustomComponent = styled.div`
    ${fixed};
`

CustomComponent.propTypes = {
    ...fixedPropTypes
}

Available props

ellipsis

Truncate string with "..." for one or many rows

Type: boolean || number

Values: true (1 row) || (number of rows) || false

Default: false

filter

Filter CSS attribute
(https://www.w3schools.com/cssref/css3_pr_filter.asp)

Type: string

Values: (value of CSS filter)

Default: ''

fixed

Fix to top/bottom of the page when user scrolls

Type: string

Values: 'top' || 'bottom' || 'none'

Default: 'none'

float

Float an element to left or right

Type: string

Values: 'left' || 'right' || 'none'

Default: 'none'

linearGradient

Add linear gradient as background of a component (only two values, top-to-down)

Type: array (first value of the array is top color, second value is bottom color)

Values: (rgba or hex)

Default: []

Example:

<CustomComponent linearGradient={['#FFFFFF', '#000000']} />

shape

Change shape of the component

Type: string

Values: 'circle' || 'square' || 'none'

Default: 'none'

swipe

Make a component swipeable

Type: boolean

Values: true || false

Default: false

uppercase

Apply uppercase to a string

Type: boolean

Values: true || false

Default: false

Documentation

To read documentation, go to:

http://docomodigital.github.io/props-to-styled/latest

or run the following command inside the props-to-styled folder:

npm run doc:open