Space

A spacing util

Install

$ yarn add @bukinoshita/space

Usage

Example with styled-jsx.

// theme/space.ts
import { Space } from '@bukinoshita/space'

// It uses the `4px` grid by default
export const space = new Space()

// components/my-component.tsx
import { space } from 'theme/spacing'

const MyComponent = () => (
  <div>
    <h1>Nice</h1>

    <style jsx={true}>
    {`
      h1 {
        margin-bottom: ${space.spacing(2)} // 8px;
        color: black;
      }
    `}
    </style>
  </div>
)

You can find more example here.

API

Space(grid, unit)

grid

Type: number
Default: 4
Optional

unit

Type: string
Default: px
Optional

.spacing(value)

value

Type: number
Required

License

MIT © Bu Kinoshita