Technology moves fast! ⚡ Don't get left behind.🚶 Subscribe to our mailing list to keep up with latest and greatest in open source projects! 🏆


Subscribe to our mailing list

Snacks

The Instacart Component Library

Subscribe to updates I use Snacks


Statistics on Snacks

Number of watchers on Github 22
Number of open issues 20
Average time to close an issue 19 days
Main language JavaScript
Average time to merge a PR 4 days
Open pull requests 8+
Closed pull requests 4+
Last commit about 1 year ago
Repo Created about 2 years ago
Repo Last Updated about 1 year ago
Size 4.73 MB
Homepage https://instacart...
Organization / Authorinstacart
Contributors8
Page Updated
Do you use Snacks? Leave a review!
View open issues (20)
View on github
Fresh, new opensource launches 🚀🚀🚀
Trendy new open source projects in your inbox! View examples

Subscribe to our mailing list

Evaluating Snacks for your project? Score Explanation
Commits Score (?)
Issues & PR Score (?)

Snacks

npm license CircleCI

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

Snacks open issues Ask a question     (View All Issues)
  • about 1 year Add test suite for ensuring server-side/node environment works
  • about 1 year Un-mounting transitions
  • about 1 year Greater than/less than breakpoints
  • about 1 year Documentation: Update form + input validations examples and docs
  • over 1 year Convert font icon to use SVGs
  • over 1 year Expose refs for all components
  • over 1 year Icons not being displayed
  • over 1 year ScrollTrack arrow disappears at end of track
  • over 1 year IE Support?
  • over 1 year Add responsive breakpoints to styleguide
  • almost 2 years Should we .gitignore the /dist folder
  • almost 2 years Allow absolute paths
Snacks open pull requests (View All Pulls)
  • SVG Icons
  • [WIP] Responsive helpers
  • [WIP] Tooltip
  • git ignore dist dir
  • Limit files pulled down when installed
  • add ic-snacks on package when install with npm
  • Add Postal code input
  • Allow absolute path Fixes #24
Snacks questions on Stackoverflow (View All Questions)
  • How to embed Expo Snacks in Stack Overflow?
  • Python vending machine snacks and drinks
  • Snake Game: Why "(Sometimes, lower than 10%)" the snacks (cookies) are created on the snake body?
Snacks list of languages used
Other projects in JavaScript