All Projects β†’ instacart β†’ Snacks

instacart / Snacks

Licence: apache-2.0
The Instacart Component Library

Programming Languages

javascript
184084 projects - #8 most used programming language

Projects that are alternatives of or similar to Snacks

Neumorphic Ui
πŸ“š A library of components based on the concept of neumorphism
Stars: ✭ 82 (+26.15%)
Mutual labels:  design, components, component-library
Fast
The adaptive interface system for modern web experiences.
Stars: ✭ 6,532 (+9949.23%)
Mutual labels:  components, component-library
Git Style Guide
A Git Style Guide
Stars: ✭ 4,851 (+7363.08%)
Mutual labels:  styleguide, style
Clarity
Clarity is a scalable, accessible, customizable, open source design system built with web components. Works with any JavaScript framework, built for enterprises, and designed to be inclusive.
Stars: ✭ 6,398 (+9743.08%)
Mutual labels:  component-library, components
React95
πŸŒˆπŸ•Ή Refreshed Windows 95 style UI components for your React app
Stars: ✭ 4,877 (+7403.08%)
Mutual labels:  components, component-library
Cp Design
A configurable Mobile UI Components(React hooks+Typescript+Scss)η»„δ»ΆεΊ“
Stars: ✭ 465 (+615.38%)
Mutual labels:  design, component-library
Awesome Ui Component Library
Curated list of framework component libraries for UI styles/toolkit
Stars: ✭ 702 (+980%)
Mutual labels:  components, component-library
Alva
Create living prototypes with code components.
Stars: ✭ 3,734 (+5644.62%)
Mutual labels:  design, components
Metro Ui Css
Impressive component library for expressive web development! Build responsive projects on the web with the first front-end component library in Metro Style. And now there are even more opportunities every day!
Stars: ✭ 6,843 (+10427.69%)
Mutual labels:  components, component-library
Elm Ui
UI library for making web applications with Elm
Stars: ✭ 878 (+1250.77%)
Mutual labels:  components, component-library
Axiom React
Axiom - Brandwatch design system and React pattern library
Stars: ✭ 41 (-36.92%)
Mutual labels:  styleguide, component-library
Story2sketch
Convert Storybook into Sketch symbols πŸ’Ž
Stars: ✭ 391 (+501.54%)
Mutual labels:  styleguide, components
Shards Vue
🌟Shards Vue is a free, beautiful and modern Vue.js UI kit based on Shards.
Stars: ✭ 390 (+500%)
Mutual labels:  design, components
Macro Components
Create flexible layout and composite UI components without the need to define arbitrary custom props
Stars: ✭ 485 (+646.15%)
Mutual labels:  style, components
Windmill React Ui
🧩 The component library for fast and accessible development of gorgeous interfaces.
Stars: ✭ 373 (+473.85%)
Mutual labels:  components, component-library
Design System Components
πŸ›  Component code and tests for the Australian Government design system
Stars: ✭ 696 (+970.77%)
Mutual labels:  design, components
Tail Kit
Tail-kit is a free and open source components and templates kit fully coded with Tailwind css 2.0.
Stars: ✭ 997 (+1433.85%)
Mutual labels:  components, component-library
Theme Ui
Build consistent, themeable React apps based on constraint-based design principles
Stars: ✭ 4,150 (+6284.62%)
Mutual labels:  design, style
Django Api Domains
A pragmatic styleguide for Django API Projects
Stars: ✭ 365 (+461.54%)
Mutual labels:  styleguide, style
React Spaces
React components that allow you to divide a page or container into nestable anchored, scrollable and resizable spaces.
Stars: ✭ 928 (+1327.69%)
Mutual labels:  components, component-library

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

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].