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