props-to-styled
Transform custom props of your styled components to styles.
Installation
NPM
npm install --save props-to-styled
Usage
Using this:
Fixed to top of the page Fixed to bottom of the page
;; const CustomComponent = styleddiv` ;`
the result is similar to:
Fixed to top of the page Fixed to bottom of the page
you can use also propTypes:
;;; const CustomComponent = styleddiv` ;` CustomComponentpropTypes = ...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:
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