Snacks

JavaScript Component Library by Instacart

Please note: We're still in pre-release stage. If you opt to use Snacks, please be prepared for breaking changes in the future.

Installation

via yarn

yarn add ic-snacks

via npm

npm install ic-snacks

Usage

Using a component:

import { CircleButton } from 'ic-snacks'

const MyComponent = props => {
  const doYes = e => { alert('Snacks are the best!') }
  const doNo = e => { alert('Wrong choice, choose again.') }

  return (
    <div>
      <p>Do you love snacks?</p>
      <CircleButton onClick={doYes}>Yes</CircleButton>
      <CircleButton onClick={doNo}>No</CircleButton>
    </div>
  )
}

A more complicated component:

import React, { Component } from 'react'
import { NavigationPills } from 'ic-snacks'

const choices = [
  { text: 'bananas' },
  { text: 'carrots' },
  { text: 'watermelon' },
  { text: 'snacks' },
  { text: 'kale' },
  { text: 'endives' },
  { text: 'arugula' },
  { text: 'spinach' },
  { text: 'potatoes' }
]

class Navigation extends Component {
  static state = {
    activePill: choices[0]
  }

  render() {
    return (
      <div>
        <NavigationPills
          pills={ choices }
          onPillClick={(e, choice) => {
            e.preventDefault();
            setState({ activePill: choice.text })
            console.log('Choice clicked!', choice)
          }}
          label='Favorite healthy snack:'
          activePill={state.activePill}
        />
      </div>
    )
  }
}

Full Documentation

https://instacart.github.io/Snacks/

Contributing

Please see contributing docs