Skip to content
The Instacart Component Library
Branch: master
Clone or download
nathanmarks 0.0.130 (#353)
* creating new docs for 0.0.130 release

* 0.0.130
Latest commit 318fbda Jul 17, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.circleci Upgrade babel and do a module build (#336) Jun 19, 2019
docs 0.0.130 (#353) Jul 17, 2019
lib/styleguide
scripts Fix docs prod build (#345) Jun 26, 2019
src type def fixes (#352) Jul 17, 2019
test/typescript type def fixes (#352) Jul 17, 2019
.codeclimate.yml increase duplication threshold (#298) Dec 19, 2018
.codecov.yml Code coverage reports (#245) Sep 10, 2018
.eslintrc.js Typings (#334) Jun 21, 2019
.gitignore Upgrade babel and do a module build (#336) Jun 19, 2019
.npmignore Upgrade babel and do a module build (#336) Jun 19, 2019
AUTHORS up package version and build (#161) Jun 11, 2018
CONTRIBUTING.MD Quick docs typo fixes (#171) Jun 19, 2018
LICENSE Add LICENSE file Aug 4, 2017
README.md Add coveralls badge to readme Feb 13, 2019
babel.config.js Fix release scripts (#339) Jun 21, 2019
package.json 0.0.130 (#353) Jul 17, 2019
prettier.config.js Use IC shared lint/prettier config (#316) Apr 15, 2019
styleguide.config.js Fix docs prod build (#345) Jun 26, 2019
svgo.config.js Upgrade babel and do a module build (#336) Jun 19, 2019
tsconfig.json Add SVG component type declaration generation and verification (#344) Jun 26, 2019
tsconfig.verify-build.json Add SVG component type declaration generation and verification (#344) Jun 26, 2019
webpack.config.js Use process.env.NODE_ENV for dev warning (#342) Jun 21, 2019
webpack.release.config.js Use process.env.NODE_ENV for dev warning (#342) Jun 21, 2019
webpack.verify-esm.config.js Add SVG component type declaration generation and verification (#344) Jun 26, 2019
yarn.lock upgrade webpack to 4.35.3 Jul 15, 2019

README.md

Snacks

npm license CircleCI Maintainability Code Coverage Coverage Status

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
  • 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 radium
yarn add prop-types
yarn add react
yarn add react-dom
yarn add react-transition-group

with npm

npm install 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

You can’t perform that action at this time.