Node's Perpetuum Mobile

    essence-chip

    1.0.10 • Public • Published

    Essence Chip - Chip component

    How to use

    Options:

    • data: object with properties:
    • name: string for input name, default: chip
    • text: string or html or component
    • icon: string or image url
    • deletable: boolean ( true or false ) - default: false
    • onClose: callback for on closing chip component
    • iconColor: string from the Colors list

    NOTE: use the example below to customize your own chips

    import Chip from 'essence-chip';
     
    var redbullChip = {
      name: 'redbullChip',
      text: [<strong>Redbull</strong>, <span> (interest)</span>],
      icon: 'R',
      deletable: true,
      onClose: ( function () { console.log('redbullChip chip'); } )
    }
     
    var goproChip = {
      name: 'goproChip',
      text: [<strong>GoPRO</strong>, <span> (interest)</span>],
      icon: 'G',
      deletable: true,
      onClose: ( function () { console.log('goproChip chip'); } )
    }
     
    class ChipTest extends React.Component {
      constructor(props) {
        super(props);
        this.state = {
          classes: ClassNames(
            this.props.classes,
            this.props.className
          )
        };
      }
     
      render() {
        return (
          <Chip {...this.props} />
        );
      }
    };
     
    <Block>
      <ChipTest data={redbullChip} iconColor='e-background-indigo-400' />
      <ChipTest data={goproChip} />
    </Block>

    Install

    npm i essence-chip

    DownloadsWeekly Downloads

    14

    Version

    1.0.10

    License

    MIT

    Last publish

    Collaborators

    • blogtools
    • essence_md
    • pearlventures