Home

Awesome

ui

js-standard-style

Collection of presentational vdux components inspired by React's rebass.

Installation

$ npm install vdux-ui

Philosophy

All of the components in vdux-ui are statelish* and largely logicless. They are pure functions of their arguments (and your contextual theme). This makes them easy to test and easy to think about.

**They do depend on css-emulator, which adds local state for simulating hover, active, and focus states. However, they are otherwise stateless.

UI Components

Layout

Theming

vdux-ui uses the uiTheme key in context to find its theme. It will look for theme properties here first, and secondly in its default theme. So you can do:

import myTheme from './my-theme'

render(<App state={state} />, {uiTheme: myTheme})

To override any of the default theming options or add your own.

Common options

The following are options provided by the <Base /> component and as such are available when using any vdux-ui component:

Rounding

You may pass:

Padding/margin

Padding and margin are specified by indexing into the scale array of your theme. Each padding/margin property accepts an index into that array, like this:

<Base px={1} /> -> <div style='padding-left: 4px; padding-right: 4px'></div>

You may specify p or m for each of these, but for simplicity i'll just write it out for padding:

Colors

You can also specify colors in your theme, and then reference those colors by name in the color and bgColor props. E.g.

import Base from 'vdux-base'

function render ({props}) {
  return <Base color='red'>{props.errorMessage}</Base>
}

And then in the root of your file:

const {render} = vdux()

render(<App/>, {uiTheme: {colors: myColors}})

But you may also pass any valid color string and it will be passed on through if there is no corresponding key in the theme's color map.

Positioning

Positioning attributes, inspired by nib's position mixin allow you an expressive shorthand for specifying different types of positioning.

Each take a string of the form top|bottom [n] left|right [n]. For example:

import {Text} from 'vdux-ui'

function render () {
  return (
    <Text absolute='bottom left'>Invalid username</Text>
  )
}

You may also specify them as boolean attributes to solely set the position property. E.g.

<Text relative>Invalid username</Text>

Lastly, you can use object syntax if you want as well:

<Text relative={{right: '5px'}}>Invalid username</Text>

Miscellaneous

But you may also pass any valid color string and it will be passed on through if there is no corresponding key in the theme's color map.

License

MIT