1.0.1 • Published 7 years ago
styled-conditional-include v1.0.1
styled-conditional-include
A small utility function for including a CSS attribute only when a given prop exists.
// This...
${props => props.color && `color: ${props.color};`}
// can be written as...
${include('color').if('color')}
// you can also access deeper props using dot notation
${include('background-color').if('theme.bg.color')}
// WARNING: when the desired prop does not exist, the include-if function WILL return the empty string
// an exception will NOT be thrown, even though none of the props in the path exist
const props = {}
include('background-color').if('theme.bg.color')(props)
Install
$ npm install --save styled-conditional-include
Usage
import styled from 'styled'
import include from 'styled-conditional-include'
const Text = styled.p`
${include('color').if('color')}
font-size: 16px;
line-height: 24px;
`
/* css
* color: palevioletred;
* font-size: 16px;
* line-height: 24px;
*/
<Text color='palevioletred'>Hello</Text>
/* css
* font-size: 16px;
* line-height: 24px;
*/
<Text>Hello</Text>