component-ui v0.12.2

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

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

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

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

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

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

Textbox

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

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

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

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