react-seeds

npm i react-seeds --save

Usage

You can use react-seeds in two ways:

• import styler from 'react-seeds' · You can call this props helper, which you ... splat into your HTML-based component when rendering.
• import { Seed } from 'react-seeds' · Or you can use the <Seed> component and pass each style attribute as a prop. By default it renders a <div>, but you can change this using the Component prop.

There are examples of both below:

Reusable stylers

import React from 'react'
import styler from 'react-seeds'

const baseStyler = ({ dark }) => styler({
  row: true,
  padding: '1em',
  relative: {
    top: '1em',
    left: '1em'
  },
  text: {
    color: dark ? '#eee' : '#111'
  },
  background: {
    color: dark ? '#222' : '#eee'
  }
})

export function Card({ children, dark = false }) {
  return (
    <div { ...baseStyler({ dark }) }>
      { children }
    </div>
  )
}

React component styling with props

import React from 'react'
import { Seed } from 'react-seeds'

export function TwoColumn({ content1, content2 }) {
  return (
    <Seed row Component='section'>
      <Seed minWidth={ 200 } grow={ 1 }>
        { content1 }
      </Seed>
      <Seed minWidth={ 400 } grow={ 1 }>
        { content2 }
      </Seed>
    </Seed>
  )
}

Styler attributes

Styler attributes mostly match CSS’s attribute names, but have some opinionated changes for a nicer experience. This includes nicer flexbox support by removing flex- prefixes, border-box box sizing by default, and use of objects for attributes such as margin, padding, absolute & relative positioning, text, background, and border.

boxSizing

• boxSizing : string = 'border-box'
• overflow : string
• width : number
• height : number
• minWidth : number
• minHeight : number
• maxWidth : number
• maxHeight : number

visibility

• visibility : string
• opacity : number

flex

• row : boolean = false
• column : boolean = false
• wrap : boolean = false
• reverse : boolean = false
• alignItems : string
• alignContent : string
• justifyContent : string
• basis : string
• grow : number
• shrink : number
• alignSelf : string

position

• absolute : object
  • top : number?
  • bottom : number?
  • left : number?
  • right : number?
• relative : object
  • top : number?
  • bottom : number?
  • left : number?
  • right : number?
• zIndex : number

margin

• margin : number | string | object:
  • top : number?
  • bottom : number?
  • left : number?
  • right : number?

padding

• padding : number | string | object:
  • top : number?
  • bottom : number?
  • left : number?
  • right : number?

text

• text : object:
  • color : string?
  • align : string?
  • indent : string?
  • overflow : string?
  • transform : string?
  • decoration : string?
  • shadow : string?
  • rendering : string?

font

• font : object:
  • family : string?
  • size : number? | string?
  • weight : number? | string?
  • style : string?
  • stretch : string?
  • variant : string?
  • kerning : string?

background

• background : string | object:
  • color : string?
  • image : string?
  • position : string?
  • size : string?
  • origin : string?
  • clip : string?
  • repeat : boolean? | string?
  • attachment : string?

border

• borderRadius / cornerRadius : number
• border : string | object:
  • width : number?
  • style : string?
  • color : color?