2.0.6 • Published 5 years ago
@style-hooks/core v2.0.6
/** @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
2.0.6
5 years ago
2.0.5
5 years ago
2.0.4
5 years ago
2.0.3
5 years ago
2.0.2
5 years ago
2.0.1
5 years ago
2.0.0
5 years ago
2.0.0-alpha.1
5 years ago
2.0.0-alpha.0
5 years ago
2.0.0-alpha
5 years ago
1.0.8
5 years ago
1.0.7
5 years ago
1.0.6
5 years ago
1.0.5
5 years ago
1.0.4
5 years ago
1.0.3
5 years ago
1.0.2
5 years ago
1.0.1
5 years ago
1.0.0
5 years ago
0.1.7
5 years ago
0.1.6
5 years ago
0.1.5
5 years ago
0.1.4
5 years ago
0.1.3
5 years ago
0.1.2
5 years ago
0.1.1
5 years ago
0.1.0
5 years ago