@planet/ui

Planet UI

Planet UI is a library of simple React components made to help bootstrap new web apps. It follows the style of Planet Explorer and should be used in conjunction with the planet-css stylesheet reset and LESS variables package.

Installation

You can install Planet UI using npm:

$ npm install --save planet-css @planet/ui

Usage

Before you start using Planet UI components, you should be using React in your web project. Include the @planet/ui package in your React app with import or require to use the individual components.

import React from 'react';
import createClass from 'create-react-class';

// require individual components
import Button from '@planet/ui/lib/button';
import Dropdown from '@planet/ui/lib/dropdown';
import Toggle from '@planet/ui/lib/toggle';

// ...or require the whole library and select components from it
import pui from '@planet/ui';
const Button = pui.Button;
const Dropdown = pui.Dropdown;
const Toggle = pui.Toggle;

const Component = createClass({
  render: function() {
    return (
      <div className="pl-component">
        <Button>Click me</Button>
        <Dropdown items={['Option 1', 'Option 2', 'Option 3']}/>
        <Toggle label="Toggle me"/>
      </div>
    );
  }
});

export default Component;

In order for your components to look right, you'll also need to add a couple of lines to your app's main LESS file.

 // import the planet-css variables and stylesheet reset
@import '../node_modules/planet-css/lib/main';

// import the compiled styles for each of the components that you want to use
@import (less) '../node_modules/@planet/ui/lib/button.css';
@import (less) '../node_modules/@planet/ui/lib/dropdown.css';
@import (less) '../node_modules/@planet/ui/lib/toggle.css';

And then you're done! Happy developing :)