Skip to content

RoyalIcing/react-seeds

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

42 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

react-seeds

Travis npm package Coveralls

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?