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
npm link
cd ../workspace/my_working_app
npm link ic-snacks
To reverse the process, you can do the following
cd ../workspace/my_working_app
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