@styled-system/prop-types
Advanced tools
Comparing version 5.0.5 to 5.0.6
{ | ||
"name": "@styled-system/prop-types", | ||
"version": "5.0.5", | ||
"version": "5.0.6", | ||
"main": "dist/index.js", | ||
@@ -12,3 +12,3 @@ "module": "dist/index.esm.js", | ||
"devDependencies": { | ||
"styled-system": "^5.0.5" | ||
"styled-system": "^5.0.6" | ||
}, | ||
@@ -21,3 +21,3 @@ "dependencies": { | ||
}, | ||
"gitHead": "d585cc19c2064684cf9f3b317d0acf982bdf137b" | ||
"gitHead": "1767bf03168f37c48990a53b654f00bcc90439dd" | ||
} |
@@ -22,1 +22,40 @@ | ||
``` | ||
## Available Type Categories | ||
* `space` | ||
* `color` | ||
* `layout` | ||
* `typography` | ||
* `flexbox` | ||
* `border` | ||
* `background` | ||
* `position` | ||
* `grid` | ||
See props of each category in [the reference table](https://styled-system.com/table). | ||
## Custom Props | ||
```js | ||
import styled from 'styled-components' | ||
import { space, system } from 'styled-system' | ||
import propTypes, { propType } from '@styled-system/prop-types' | ||
const gridGap = system({ | ||
gap: { | ||
property: 'gridGap', | ||
scale: 'space', | ||
defaultScale: [0, 4, 8, 16, 32, 64, 128, 256, 512] | ||
} | ||
}) | ||
const Stack = styled('div')( | ||
compose(space, gridGap) | ||
) | ||
Stack.propTypes = { | ||
...propTypes.space, | ||
gap: propType, | ||
} | ||
``` |
5474
61