npm package: @nypl/dgx-react-buttons
Description: React DGX Buttons
Author: Edwin Guzman
Latest version: 0.1.1

# NYPL React Button Components

Different button components used in the dgx React apps.

## Version
0.1.1

## Usage
Require dgx-react-buttons as a dependency in your package.json file, pointing to the `master` branch.

### Import
```
#!javascript
    /** ES6 **/
    import React from 'react';
    import {
        BasicButton,
        PaginationButton,
        SeeMoreButton,
        SimpleButton
    } from 'dgx-react-buttons';
    
    // Or just import a specific button
    import { SeeMoreButton } from 'dgx-react-buttons';

    // It's also possible to get the components in this following example,
    // but the top is more concise.
    import Buttons from './buttons.js';
    let BasicButton = Buttons.BasicButton,
        PaginationButton = Buttons.PaginationButton,
        SeeMoreButton = Buttons.SeeMoreButton,
        SimpleButton = Buttons.SimpleButton;

    /** ES5 **/
    var Buttons = require('dgx-react-buttons'),
        Basicbutton = Buttons.BasicButton;
```

### Basic Button

Available props:

    BasicButton.propTypes = {
      id: React.PropTypes.string.isRequired,
      className: React.PropTypes.string.isRequired,
      name: React.PropTypes.string,
      label: React.PropTypes.string,
      lang: React.PropTypes.string,
      ref: React.PropTypes.string,
      style: React.PropTypes.object,
      onClick: React.PropTypes.func,
      onMouseLeave: React.PropTypes.func,
      onMouseEnter: React.PropTypes.func,
    };        

Usage:

    <BasicButton id="BasicButton-Component" />

### Pagination Button

Available props:

    PaginationButton.propTypes = {
      id: React.PropTypes.string.isRequired,
      className: React.PropTypes.string.isRequired,
      name: React.PropTypes.string,
      label: React.PropTypes.string,
      lang: React.PropTypes.string,
      isLoading: React.PropTypes.bool.isRequired,
      dots: React.PropTypes.number,
      onClick: React.PropTypes.func,
      style: React.PropTypes.object,
      dotStyle: React.PropTypes.object,
    };

Usage:

    const styles = {
      redBorder: {
        color: '#ED1C24',
        border: '2px solid #ED1C24',
      },
      redDots: {
        border: '3px solid #ED1C24',
      },
    };

    <PaginationButton
      id="PaginationButton-Component"
      isLoading={isLoading}
      style={styles.redBorder}
      dotStyle={styles.redDots} />

### See More Button

Available props:

    SeeMoreButton.propTypes = {
      id: React.PropTypes.string.isRequired,
      className: React.PropTypes.string.isRequired,
      label: React.PropTypes.string,
      lang: React.PropTypes.string,
      target: React.PropTypes.string,
      style: React.PropTypes.object,
      onClick: React.PropTypes.func,
    };

Usage:

    <SeeMoreButton
      id="SeeMoreBtn-Label-Component"
      label="See More"
      style={styles.redBorder} />

### Simple Button

Available props:

    SimpleButton.propTypes = {
      id: React.PropTypes.string.isRequired,
      className: React.PropTypes.string.isRequired,
      label: React.PropTypes.string,
      lang: React.PropTypes.string,
      target: React.PropTypes.string,
      style: React.PropTypes.object,
      onClick: React.PropTypes.func,
    };

Usage:

    <SimpleButton id="SimpleButton-Component" />

## Demo

        $ npm install
        $ npm start

Check localhost:3000.