react-pure

0.3.1 • Public • Published

react-pure

React components using Pure CSS.

Install

npm install react-pure

React is also required as a peer dependency.

Usage

The components documented below are exposed as CommonJS modules and can be accessed in the following ways:

// ES6
import { Button, Cell } from 'react-pure';
 
// CommonJS
var Button = require('react-pure').Button;
// or
var Pure = require('react-pure');
var Button = Pure.Button;
 
// Direct access to the module
var Button = require('react-pure/lib/Button');

Components

Button

Pure CSS reference

Properties

  • active: bool (optional, defaults to false): adds the pure-button-active class.
  • disabled: bool (optional, defaults to false): adds the pure-button-disabled class.
  • primary: bool (optional, defaults to false): adds the pure-button-primary class.
  • href: string (optional): if set, renders a <a> element instead of <button>.

Cell

A Cell is an element of a Pure CSS Grid

Properties

  • size: string (optional, defaults to 1): adds the pure-u-{size} class. You can use the / separator instead of -, ex: <Cell size='1/3'>.
  • sm: string (optional): adds the pure-u-sm-{sm} class.
  • md: string (optional): adds the pure-u-md-{md} class.
  • lg: string (optional): adds the pure-u-lg-{lg} class.
  • xl: string (optional): adds the pure-u-xl-{xl} class.

Menu

Pure CSS reference

Properties

  • horizontal: bool (optional, defaults to false): adds the pure-menu-horizontal class.
  • scrollable: bool (optional, defaults to false): adds the pure-menu-scrollable class.

MenuItem

Renders a <li> node with the pure-menu-item class by default.

Properties

  • allowHover: bool (optional, defaults to false): adds the pure-menu-allow-hover class.
  • disabled: bool (optional, defaults to false): adds the pure-menu-disabled class.
  • hasChildren: bool (optional, defaults to false): adds the pure-menu-has-children class.
  • selected: bool (optional, defaults to false): adds the pure-menu-selected class.

Table

Pure CSS reference

Properties

  • bordered: bool (optional, defaults to false): adds the pure-table-bordered class.
  • horizontal: bool (optional, defaults to false): adds the pure-table-horizontal class.
  • striped: bool (optional, defaults to false): adds the pure-table-striped class.

Changelog

v0.3.0 (15/04/15)

  • Updated Babel to v5.
  • Removed size property from Button as it is not a default Pure class.

v0.2.4 (23/03/15)

Fixed MenuItem export.

v0.2.3 (18/03/15)

Added babel-runtime as a dependency to avoid duplicate declarations in modules.

v0.2.2 (12/03/15)

Publish source in npm package so that apps can use their own transpiler.

v0.2.0 (11/03/15)

This version is meant to be used with React v0.13 and Pure v0.6.

  • Added MenuItem element.
  • Added scrollable property to Menu (Pure v0.6).
  • Removed open property from Menu (Pure v0.6).
  • Removed the joinClasses() util, classnames is used internally instead.

v0.1.0 (21/01/15)

Initial release, using React v0.12 and Pure v0.5.

License

Apache 2.0
Copyright 2015 Hailo

Package Sidebar

Install

npm i react-pure

Weekly Downloads

26

Version

0.3.1

License

Apache 2

Last publish

Collaborators

  • paul_lecam