rs

react-seeds

React stylers for nicer Flexbox and CSS

Showing:

Popularity

Downloads/wk

19

Maintenance

No Maintenance Data Available

Package

Dependencies

3

License

MIT

Type Definitions

Tree-Shakeable

Yes?

Categories

Readme

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?

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100
No reviews found
Be the first to rate

Alternatives

No alternatives found

Tutorials

No tutorials found
Add a tutorial