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

You can use either yarn or npm to install Snacks and its dependencies.

with yarn

yarn add 'ic-snacks'

with npm

npm install 'ic-snacks'

Installing peer dependencies

Snacks has a few peer dependencies required to use the library.

If you already have these libraries listed in your app's dependencies, there's no need to install them again.

For the main component library:

• prop-types v15 or v16
• @instacart/radium v18+
• React v15 or v16
• ReactDom v15 or v16

If you'd like to use animations: react-transition-group v2.2

Local Development as a dependancy

Sometimes it may be helpful to work on this project locally and view the changes in another app. This can be accomplished using npm link

# From this directory
npm link
# go to the app you are working on
cd ../workspace/my_working_app
# symlink this app
npm link ic-snacks

To reverse the process, you can do the following

# go to the app you are working on
cd ../workspace/my_working_app
# remove symlink
npm unlink ic-snacks

with yarn

yarn add @instacart/radium
yarn add prop-types
yarn add react
yarn add react-dom
yarn add react-transition-group

with npm

npm install @instacart/radium
npm install prop-types
npm install react
npm install react-dom
npm install react-transition-group

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