renaissance-react v0.1.1

Just Want the CSS File? Renaissance CSS ➞

Getting Started

Install with npm

npm install renaissance-react

Components

Grid

Container

<Container />

Row & Column

<Row>
  <Column />
</Row>

You can set the column size, example:

<Row>
  <Column size={`8`}>
      ...
  </Column>
  <Column size={`4`}>
      ...
  </Column>
  <Column size={`12`}>
      ...
  </Column>
</Row>

Navbar

Accepts children & brandName props. Example:

<Navbar brandName="Renaissance">
  <a href="https://twitter.com">Twitter</a>
  <a href="https://renaissancecss.com">Renaissance</a>
</Navbar>

Forms

Input

<Input />

Label Example

<Input label="Label Example"/>

Text Area

<TextArea rows="4" cols="60"/>

Radio Button

name & value props are required

<Radio name="test" value="Test 1" />

Checkbox Button

name & value props are required

<Checkbox name="foo" value="foo1" />

Slider

min, max, step, updateValue & value props are required

Using the <Slider /> component requires use of state. Example:

import React, { Component } from 'react'

import {
  Slider
} from 'renaissance-react'

export default class SliderExample extends Component {
   constructor(props) {
      super(props)
      this.state = {
        sliderValue: 0
      }

      this.handleChange = this.handleChange.bind(this)
    }

    handleChange(e) {
      this.setState({
        sliderValue: e
      })
    }

   render() {
    return (
      <Slider value={this.state.sliderValue} min={'0'} max={'100'} step={'50'} updateValue={this.handleChange}/>
    )
   }
}

Progress Bar

width prop only takes a String.

<ProgressBar width={'50'}/>

Buttons

text prop takes a required String.

<Button text='XXX!!! 🧠' />

Notifications

message prop takes a required String.

The type prop accepts (3) values: - success - alert - warning

<Notification type="success" message="woot woot!"/>

//TODO: Give you button handler to close notification

Table

Takes a data prop.

Example:

<Table data={[
    {"First Name": "John", "Last Name": "Conor", "Age": "9000"},
    {"First Name": "Kevin", "Last Name": "Conor"}
]} />

The first item in teh data array sets presedence for the headers

Tabs

Takes a data prop.

Example:

<Tabs data={[
    {name: "tab1", text: 'woot woot'},
    {name: "tab2", text: '2woot woot2'}
]}/>

License