Low-level presentational UI component
Last updated 5 years ago by ashaffer88 .
MIT · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install vdux-base 
SYNC missed versions from official npm registry.



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


$ npm install vdux-base


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.


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.


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 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


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'

  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.


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.



Current Tags

  • 1.2.5                                ...           latest (5 years ago)

10 Versions

  • 1.2.5                                ...           5 years ago
  • 1.2.4                                ...           5 years ago
  • 1.2.3                                ...           5 years ago
  • 1.2.1                                ...           5 years ago
  • 1.2.0                                ...           5 years ago
  • 1.1.4                                ...           5 years ago
  • 1.1.2                                ...           5 years ago
  • 1.1.1                                ...           5 years ago
  • 1.1.0                                ...           5 years ago
  • 1.0.0                                ...           5 years ago
Maintainers (1)
Today 0
This Week 1
This Month 1
Last Day 1
Last Week 0
Last Month 0
Dependencies (3)
Dev Dependencies (11)

Copyright 2014 - 2016 © taobao.org |