@hypobox/react
v1.5.0
Published
Tiny React Box component.
Readme
@hypobox/react
Minimalist CSS-in-JS solution for React. Built with hypostyle.
npm i @hypobox/react hypostyle reactUsage
To use @hypobox/react, first have a look at
hypostyle. Basically, you provide
@hypobox/react a hypostyle instance, and then you style components using attributes
on React components that match your hypostyle setup.
Setup
import React from 'react'
import { render } from 'react-dom'
import { hypostyle } from 'hypostyle'
import presets from 'hypostyle/presets'
import { Hypo } from '@hypobox/react'
const instance = hypostyle(presets)
render(
<Hypo hypostyle={instance}>
<App />
</Hypo>
)Styling
In hypobox, all styling is done via the Box component.
import { Box } from '@hypobox/react'
function App() {
return <Box color="tomato">Hello world!</Box>
}If you've configured shorthands in your hypostyle instance (or are using
the presets), you can also use those:
<Box c="tomato">Hello world!</Box>Responsive Styles
Just like hypostyle, you can pass arrays or objects to denote responsive
values:
<Box display={['none', 'none', 'flex']} />Or:
<Box display={{ 2: 'flex' }} />Macros & Variants
macros especially shine when used with JSX. Imagine the following config:
const instance = hypostyle({
macros: {
caps: { textTransform: 'uppercase' },
},
variants: {
link: {
primary: {
c: 'blue',
'&:hover': {
c: 'black',
},
},
},
},
})You can reference those values like this:
<Box as="a" caps link="primary">
Click me!
</Box>Custom Styles
For props you don't have configured as shorthands, or for custom values and
breakpoints, use the cx prop. Examples:
<Box cx={{ c: 'tomato' }} />
<Box cx={{
'@media (max-width: 567px)': {
display: 'none'
}
}} />cx also supports passing a function. The function will be
callled with the full theme you passed you hypostyle instance:
<Box
cx={(theme) => ({
c: theme.tokens.colors.primary,
})}
/>Defaults and Extending Components
If you like, compose provides a familiar interface:
import { compose } from '@hypobox/react'
const H1 = compose('h1', { fs: 1 })And you can use it to extend components as well:
const Headline = compose(H1, { color: 'primary' })Server Rendering
SSR is very simple. Complete example:
import React from 'react'
import { renderToString } from 'react-dom/server'
import { hypostyle } from 'hypostyle'
import presets from 'hypostyle/presets'
import { Hypo, Box } from '@hypobox/react'
const instance = hypostyle(presets)
const body = renderToString(
<Hypo hypostyle={instance}>
<Box f aic jcc>
Flexy centered content
</Box>
</Hypo>
)
const stylesheet = hypo.flush()
const html = `
<!DOCTYPE html>
<html>
<head>
<style>${stylesheet}</style>
</head>
<body>${body}</body>
</html>
`Related
License
MIT License © Sure Thing