Hyper minimal hyposcript Box
component, built with hypostyle.
npm i hypoboximport { Box } from 'hypobox'
;<Box f aic fw>
<Box w={[1, 1 / 2]}>
<H1 c="#333">Hello world!</H1>
</Box>
<Box w={[1, 1 / 2]}>
<Box
as="button"
c="#333"
css={(tokens) => ({
'&:hover': { color: 'tomato' },
})}
>
Click Me
</Box>
</Box>
</Box>By default, hypobox provisions a default hypostyle instance for you, using
hypostyle's default presets.
To customize this, configure a custom hypostyle instance, optionally merging in
the default preset:
import { hypostyle } from 'hypostyle'
import presets from 'hypostyle/presets'
import { Box, configure } from 'hypobox'
const hypo = hypostyle({
...presets,
tokens: {
...presets.tokens,
color: {
primary: '#ff4567'
}
},
macros: {
outlined: {
border: '1px solid black',
}
}
})
configure(hypo)
<Box c='primary' outlined /> // => { color: '#ff4567', border: '1px solid black' }Note: if you plan to customize your implementation with
configure(), you should do that before usingBoxor any of the utils.
Create a hypostyle instance as above and use it for everything else. Refer to
the hypostyle docs docs for more info
on what's available.
SSR is pretty similar to what you see in the hypostyle docs.
Note: We recommend using a new
hypostyleinstance for each render to ensure no styles are leaked into sequential requests.
import { hypostyle } from 'hypostyle'
import presets from 'hypostyle/presets'
import { Box, configure } from 'hypobox'
const hypo = hypostyle(presets)
configure(hypo)
const body = (
<Box f aic jcc>
Flexy centered content
</Box>
)
const stylesheet = hypo.flush()
const html = `
<!DOCTYPE html>
<html>
<head>
<style>${stylesheet}</style>
</head>
<body>${body}</body>
</html>
`MIT License © Sure Thing