styled-is
Flag utility for styled-components
.
Table of Contents
Install
yarn add styled-is
Usage
is, isNot, isOr, isSomeNot
are used for boolean props and can check one or more props at a time is(prop1, prop2, ...)
.
match
is used to check the value of a prop match(prop, value)
.
Functions can also be passed to all of the above to allow for more complex prop-checking. Any functions passed in will automatically be called with the component's props. For example if you wanted to handle a button with only an icon differently for different sizes:
$` font-size: 12px; `; $` font-size: 9px; `;
Examples
;; const Div = styleddiv` display: block; opacity: 0; ; ; ; ; ; ; ; ; ; ;`;
// display: block;// opacity: 0;// float: center;// wat: 1;<Div> // display: block;// opacity: 0;// background-color: red;// opacity: 1;// float: center;// wat: 1;<Div red> // display: block;// opacity: 0;// background-color: red;// opacity: 1;// float: left;// position: relative;<Div red left> // display: block;// opacity: 0;// background-color: red;// opacity: 1;// float: left;// position: relative;// height: 64px;<Div red left size='large'> // display: block;// opacity: 0;// float: center;// wat: 1;// background-color: green;// width: 6rem;<Div green> // display: block;// opacity: 0;// float: center;// wat: 1;// background-color: green;// width: 3rem;<Div green size='small'>
License
MPL-2.0