Package Exports

component-ui

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (component-ui) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

component-ui

Simple components for React. Bring your own CSS reset.

Button
Flex
Grid
Spinner
Textbox
Toggle
Utils
- Each
- When

Install with NPM

npm install --save component-ui

Import or include the CSS

CSS

@import '/your/path/to/component-ui/dist/index.css';

HTML

<link rel="stylesheet" href="/your/path/to/component-ui/dist/index.css">

Components

Button

Property	Type	Description
`className`	`String`	CSS class passed into the button element
`click`	`Function`	Handles the onClick event on the button
`confirm`	`Boolean`	Applies confirm styles to the button
`disabled`	`Boolean`	Disables the button
`primary`	`Boolean`	Applies primary styles to the button
`submit`	`Boolean`	Button will submit when placed in forms
`warning`	`Boolean`	Applies warning styles to the button

import React from 'react';
import { Button } from 'component-ui';

const ButtonExamples = (props) => (
  <div>
    <Button className="button-example">Button with className</Button>
    <Button click={props.click}>Button with click handler</Button>
    <Button confirm disabled>Confirm Disabled</Button>
    <Button primary>Primary</Button>
    <Button submit>Submit</Button>
    <Button warning>Warning</Button>
  </div>
);

Flex

Property	Type	Description
`align`	`String`	Aligns the children within the component
`basis`	`Number`	Percent of the parent Flex used for size
`className`	`String`	CSS class passed into the element
`grow`	`Boolean`	Fills the space available in the parent
`hidden`	`Boolean`	Hides the component (display: none)
`hide`	`String`	Hides the component for the screen size
`hideXs`	`Boolean`	Hidden for Extra Small to Small screens
`hideSm`	`Boolean`	Hidden for Small to Medium screens
`hideMd`	`Boolean`	Hidden for Medium to Large screens
`hideLg`	`Boolean`	Hidden for Large to Extra Large screens
`layout`	`String`	Direction to layout the children within
`overflow`	`Boolean`	Allows scrolling of overflowing content
`show`	`String`	Shows the component for the screen size
`shrink`	`Boolean`	Shrinks to allow siblings to fit parent
`wrap`	`Boolean`	Allows wrapping the children to fit

import React from 'react';
import { Flex } from 'component-ui';

/*
align:
  start    | start-{center, end, around, between}
  center   | center-{start, end, around, between}
  end      | end-{start, center, around, between}
  stretch  | stretch-{start, center, end, around, between}
  baseline | baseline-{start, center, end, around, between}
hide/show:
  xs, gt-xs, lt-xs | extra small (320px), greater than, less than
  sm, gt-sm, lt-sm | small (480px), greater than, less than
  md, gt-md, lt-md | medium (768px), greater than, less than
  lg, gt-lg, lt-lg | large (1024px), greater than, less than
  xl, gt-xl, lt-xl | extra large (1280px), greater than, less than
*/
const FlexExamples = () => (
  <Flex align="start-center" className="flex-example" layout="row">
    <Flex align="stretch-start" basis={50} hide="gt-md" layout="column">
      <p>Content</p>
    </Flex>
    <Flex align="center-end" grow hideLg layout="column">
      <p>Content</p>
    </Flex>
    <Flex align="center-start" layout="column" overflow shrink>
      <p>Content</p>
    </Flex>
    <Flex align="end" hidden layout="column" overflow show="lt-md" shrink>
      <p>Content</p>
    </Flex>
  </Flex>
);

Grid

Property	Type	Description
`className`	`String`	CSS class passed into the element
`container`	`Boolean`	Becomes a container for Grid components
`hidden`	`Boolean`	Hides the component (display: none)
`hide`	`String`	Hides the component for the screen size
`hideXs`	`Boolean`	Hidden for Extra Small to Small screens
`hideSm`	`Boolean`	Hidden for Small to Medium screens
`hideMd`	`Boolean`	Hidden for Medium to Large screens
`hideLg`	`Boolean`	Hidden for Large to Extra Large screens
`show`	`String`	Shows the component for the screen size
`xs`	`Number`	Grid size (1-12) for Extra Small screens
`sm`	`Number`	Grid size (1-12) for Small screens
`md`	`Number`	Grid size (1-12) for Medium screens
`lg`	`Number`	Grid size (1-12) for Large screens
`xl`	`Number`	Grid size (1-12) for Extra Large screens

import React from 'react';
import { Grid } from 'component-ui';

/*
hide/show:
  xs, gt-xs, lt-xs | extra small (320px), greater than, less than
  sm, gt-sm, lt-sm | small (480px), greater than, less than
  md, gt-md, lt-md | medium (768px), greater than, less than
  lg, gt-lg, lt-lg | large (1024px), greater than, less than
  xl, gt-xl, lt-xl | extra large (1280px), greater than, less than
*/
const GridExamples = () => (
  <Grid className="grid-example" container>
    <Grid hide="lt-md" xs={12} sm={6} md={4}>
      <p>Content</p>
    </Grid>
    <Grid hideMd xs={12} sm={6} md={4}>
      <p>Content</p>
    </Grid>
    <Grid show="gt-md" xs={12} sm={6} md={4}>
      <p>Content</p>
    </Grid>
  </Grid>
);

Spinner

Property	Type	Description
`className`	`String`	CSS class passed into the element
`overlay`	`Boolean`	Display as centered full-screen overlay

import React from 'react';
import { Spinner } from 'component-ui';

const SpinnerExample = () => (
  <Spinner className="spinner-example" overlay />
);

Textbox

Property	Type	Description
`change`	`Function`	Handles the onChange event on the input
`className`	`String`	CSS class passed into the element
`defaultText`	`String`	The default text for uncontrolled input
`disabled`	`Boolean`	Disables the text input
`focus`	`Function`	Handles the onFocus event on the input
`labelText`	`String`	Optional label text for the input
`name`	`String`	The name used for the input element
`placeholder`	`String`	Optional text shown when input is empty
`type`	`String`	The type of the text input
`value`	`String`	The value used for the input value

import React from 'react';
import { Textbox } from 'component-ui';

const TextboxExample = (props) => (
  <Textbox
    change={props.change}
    className="textbox-example"
    focus={props.focus}
    labelText="Book Title"
    name="bookTitle"
    placeholder="Title of the Book"
    type="text"
    value={props.bookTitle}
  />
);

Toggle

Property	Type	Description
`change`	`Function`	Handles the onChange event on the input
`checked`	`Boolean`	Passed into the hidden checkbox input
`className`	`String`	CSS class passed into the element
`disabled`	`Boolean`	Disables the toggle input
`name`	`String`	The name used for the input element
`value`	`String`	The value used for the input value

import React from 'react';
import { Toggle } from 'component-ui';

const ToggleExample = (props) => (
  <Toggle
    change={props.change}
    checked
    className="toggle-example"
    disabled
    name="enableTimeTravel"
    value="sureWhyNot"
  />
);

Utils

Each

Property	Type	Description
`items`	`Array`	Array of objects to map to components
`component`	`Component`	Component to render for each item

import React from 'react';
import { Each } from 'component-ui';

const items = [
  {
    name: 'Pasta'
  },
  {
    name: 'Pizza'
  }
];

const Item = (props) => <li>{props.name}</li>;

const EachExample = () => (
  <ul>
    <Each items={items} component={Item} />
  </ul>
);

When

Property	Type	Description
`is`	`Boolean`	Renders the children if value is truthy

import React from 'react';
import { When } from 'component-ui';

const WhenExample = (props) => (
  <div>
    <When is={props.isExampleReady}>
      <p>Content is rendered</p>
    </When>
    <When is={!props.isExampleReady}>
      <p>Content is not rendered</p>
    </When>
  </div>
);