https://github.com/front-of-house/hypobox-react
Hyper minimal React Box component, built with hypostyle.
https://github.com/front-of-house/hypobox-react
Last synced: 4 months ago
JSON representation
Hyper minimal React Box component, built with hypostyle.
- Host: GitHub
- URL: https://github.com/front-of-house/hypobox-react
- Owner: front-of-house
- Created: 2021-02-05T23:12:37.000Z (about 4 years ago)
- Default Branch: main
- Last Pushed: 2022-12-22T18:43:49.000Z (over 2 years ago)
- Last Synced: 2024-11-19T01:27:30.778Z (5 months ago)
- Language: TypeScript
- Homepage:
- Size: 282 KB
- Stars: 4
- Watchers: 2
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# @hypobox/react
[](https://www.npmjs.com/package/@hypobox/react) [](https://coveralls.io/github/sure-thing/hypobox-react?branch=main) [](https://bundlephobia.com/result?p=@hypobox/react)
Minimalist CSS-in-JS solution for React. Built with
[hypostyle](https://github.com/sure-thing/hypostyle).
```bash
npm i @hypobox/react hypostyle react
```
## Usage
To use `@hypobox/react`, first have a look at
[hypostyle](https://github.com/sure-thing/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
```jsx
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(
)
```
### Styling
In `hypobox`, all styling is done via the `Box` component.
```jsx
import { Box } from '@hypobox/react'
function App() {
return Hello world!
}
```
If you've configured `shorthands` in your `hypostyle` instance (or are using
the presets), you can also use those:
```jsx
Hello world!
```
### Responsive Styles
Just like `hypostyle`, you can pass arrays or objects to denote responsive
values:
```jsx
```
Or:
```jsx
```
### Macros & Variants
`macros` especially shine when used with JSX. Imagine the following config:
```jsx
const instance = hypostyle({
macros: {
caps: { textTransform: 'uppercase' },
},
variants: {
link: {
primary: {
c: 'blue',
'&:hover': {
c: 'black',
},
},
},
},
})
```
You can reference those values like this:
```jsx
Click me!
```
### Custom Styles
For props you don't have configured as shorthands, or for custom values and
breakpoints, use the `cx` prop. Examples:
```jsx
```
`cx` also supports passing a function. The function will be
callled with the full `theme` you passed you `hypostyle` instance:
```jsx
({
c: theme.tokens.colors.primary,
})}
/>
```
### Defaults and Extending Components
If you like, `compose` provides a familiar interface:
```javascript
import { compose } from '@hypobox/react'
const H1 = compose('h1', { fs: 1 })
```
And you can use it to extend components as well:
```javascript
const Headline = compose(H1, { color: 'primary' })
```
### Server Rendering
SSR is very simple. Complete example:
```javascript
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(
Flexy centered content
)
const stylesheet = hypo.flush()
const html = `
${stylesheet}
${body}
`
```
### Related
- [hyposcript](https://github.com/sure-thing/hyposcript)
- [hypostyle](https://github.com/sure-thing/hypostyle)
- [hypobox](https://github.com/sure-thing/hypobox)
- [styled-system](https://github.com/styled-system/styled-system)
- [nano-css](https://github.com/streamich/nano-css)
### License
MIT License © [Sure Thing](https://github.com/sure-thing)