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.
☝️ Don't forget to install the peer dependencies as well.
npm install ui-box-plus ui-box styled-componentsAdd 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>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>
);ui-box-plus exports a hook for getting information about the device. It's used by the Element component when you provide an object prop. You may find it useful for creating responsive designs.
import { useDeviceInfo } from "ui-box-plus";
const { width, device } = useDeviceInfo();
interface DeviceInfo {
width: number;
device: "mobile" | "tablet" | "desktop" | "hd";
}- 0.2.0
- Export useDeviceInfo hook.
- 0.1.0
- First release.
Distributed under the MIT license. See LICENSE for more information.