Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including essence-chip with all npm packages installed. Try it out:

require("react/package.json"); // react is a peer dependency. var essenceChip = require("essence-chip")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

essence-chip v1.0.10

Essence Chip - Chip & ChipItem components

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>

Metadata

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free