@style-hooks/core
v2.0.3 css-in-js css in js css styles react hook react react hooks use-styles use styles hook and 7 more...
A suite of utilities for adding responsive style props to your React components using Emotion
Use @style-hooks
to seamlessly add themes, CSS-in-JS styles,
variants, breakpoint props, a css
prop, and an as
prop
to any React function component.
For a styled-components
-like interface, check out @style-hooks/styled.
/** @jsx jsx */
import React from 'react'
import {css, jsx} from '@emotion/core'
import {createStyleHook, createElement, ThemeProvider} from '@style-hooks/core'
// Your very own style hook
const useBox = createStyleHook('box', {
w: (value, theme, props) => css`
width: ${value + theme.box.sizeUnit};
`,
})
// Accompanying component w/ style props using
// your style hook
const Box = props => {
props = useBox(props)
// createElement here provides this component
// an 'as' prop, you could also use emotion's
// jsx()
return createElement('div', props)
}
// The theme for your app
const theme = {box: {sizeUnit: 'px'}}
// Usage w/ theme
const App = () => (
<ThemeProvider theme={theme}>
{/*
Shows off the 'as' prop,
followed by 'breakpoint props',
followed by the 'css' prop
*/}
<Box
as="main"
w="200:phone 300:tablet"
css={theme => css`
@media ${theme.breakpoints.phone} {
height: 200px;
background-color: hotpink;
}
@media ${theme.breakpoints.tablet} {
height: 300px;
background-color: skyblue;
}
`}
>
Hello world from this {'<main>'}
</Box>
</ThemeProvider>
)
Installation
npm i @style-hooks/core @emotion/core
yarn add @style-hooks/core @emotion/core
Playground
Check out
@style-hooks
on CodeSandbox
API Documentation
Complete documentation can be found here
Introduction
Learn more about the basics ofstyle-hooks
useStyles()
A hook for creating responsive CSS styles with responsive breakpoints from input propscreateElement()
A wrapper aroundReact.createElement
for adding anas
prop andcss
prop to your component<ThemeProvider>
The theme context provider<ThemeConsumer>
The theme context consumeruseTheme()
A hook for consuming the theme<StylesConsumer>
A context consumer for reading, replacing, and merging themesuseStylesContext()
A hook for reading, replacing, and merging themes
npm i @style-hooks/[email protected]
Metadata
- MIT
- Whatever
- Jared Lunde
- released 9/28/2019