ui-box-plus
It's
📦 ui-box with extras🎁
A fast and powerful React UI primitive for building components using CSS-in-JS. Extends ui-box with CSS shorthands, multi-type CSS props and integrates with styled components.
Install
npm install ui-box-plus ui-box styled-componentsSetup
Add the ThemeProvider from styled components to your app. There is only one required
theme property: gridSize: number. This will be the size in pixels of one grid unit.
<ThemeProvider theme={{gridSize: 12}}>...</ThemeProvider>Usage
import El from "ui-box-plus";
const Button = (props) => (
<El
is="button" // Strings are taken 'as is'
h="32px" // Most CSS shorthand notations are supported
mb // Booleans are interpreted as 1 grid unit
p={2} // Numbers are interpreted as number of grid units
background={theme => theme.colors.warning} // Functions are given the styled component theme
w={{desktop: 8, mobile: "100%"}} // Provide an object to handle different devices
{...props}
/>
);
const Example = () => (
<Button disabled mt={4}>Hi</Button>
);Release History
- 0.1.0
- First release.
License
Distributed under the MIT license. See LICENSE for more information.
