Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

ic-snacks

Package Overview
Dependencies
Maintainers
12
Versions
134
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

ic-snacks

The Instacart Component Library for Web

  • 0.0.159
  • latest
  • Source
  • npm
  • Socket score

Version published
Maintainers
12
Created
Source

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
  • @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

Keywords

FAQs

Package last updated on 14 Feb 2022

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc