base

Low-level presentational UI component, inspired heavily (read: copied entirely) from rebass.

Installation

$ npm install vdux-base

Usage

This is not intended for direct use in application code. It's intended to be used as a low-level component consumed by other reusable UI components, though you're free to use it directly if you want as well.

Themes

Base looks for its theme in the baseTheme property of context. So when you run your app, just do:

import myTheme from './my-theme'

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

Your theme will be extended over the default theme, which you can see here.

Rounding

You may pass:

• circle=true as a prop and you'll get a circular element (i.e. borderRadius=99999px)
• pill=true is an alias for circle
• rounded=true sets borderRadius to borderRadius from your theme

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:

• p - Pad all sides
• px - Pad the x-axis (i.e. left/right)
• py - Pad the y-axis (i.e. top/bottom)
• pt - Pad the top
• pl - Pad the left side
• pr - Pad the right side
• pb - Pad the bottom

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'

Base.setBaseTheme({
  colors: {
    ...Base.theme.colors,
    error: 'red'
  }
})

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

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.

baseStyle

If you are creating a reusable component and you want to add custom style properties, you should use the baseStyle prop to add your style, and then forward the style prop, which will supercede anything in baseStyle or anything set by the <Base/> component itself.

License

MIT