Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://instacart.github.io/Snacks/
The Instacart Component Library
https://instacart.github.io/Snacks/
component-library components design instacart javascript style styleguide
Last synced: about 12 hours ago
JSON representation
The Instacart Component Library
- Host: GitHub
- URL: https://instacart.github.io/Snacks/
- Owner: instacart
- License: apache-2.0
- Created: 2017-04-04T20:04:07.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2023-07-19T09:49:45.000Z (over 1 year ago)
- Last Synced: 2024-03-25T21:22:59.735Z (8 months ago)
- Topics: component-library, components, design, instacart, javascript, style, styleguide
- Language: JavaScript
- Homepage: https://instacart.github.io/Snacks/
- Size: 18.7 MB
- Stars: 79
- Watchers: 50
- Forks: 37
- Open Issues: 52
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.MD
- License: LICENSE
Awesome Lists containing this project
README
[Snacks](https://instacart.github.io/Snacks/)
=========================
[](https://www.npmjs.com/package/ic-snacks) [](https://github.com/instacart/Snacks/blob/master/LICENSE) [](https://circleci.com/gh/instacart/Snacks)
[](https://codeclimate.com/github/instacart/Snacks/maintainability) [](https://codecov.io/gh/instacart/Snacks)
[](https://coveralls.io/github/instacart/Snacks?branch=try_coveralls)
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
```sh
yarn add 'ic-snacks'
```
### with npm
```sh
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
```sh
# 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
```sh
# go to the app you are working on
cd ../workspace/my_working_app
# remove symlink
npm unlink ic-snacks
```
#### with yarn
```sh
yarn add @instacart/radium
yarn add prop-types
yarn add react
yarn add react-dom
yarn add react-transition-group
```
#### with npm
```sh
npm install @instacart/radium
npm install prop-types
npm install react
npm install react-dom
npm install react-transition-group
```
## Usage
Using a component:
```js
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 (
Do you love snacks?
Yes
No
)
}
```
A more complicated component:
```js
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 (
{
e.preventDefault();
setState({ activePill: choice.text })
console.log('Choice clicked!', choice)
}}
label='Favorite healthy snack:'
activePill={state.activePill}
/>
)
}
}
```
## Full Documentation
https://instacart.github.io/Snacks/
## Contributing
Please see [contributing docs](https://github.com/instacart/Snacks/blob/master/CONTRIBUTING.MD)