Téléchargement Snacks - Téléchargement du code source Snacks

Snacks

Composants tiers

v0.0.159

Télécharger

Collations

Bibliothèque de composants JavaScript par Instacart

Veuillez noter: nous sommes toujours en phase de pré-libération. Si vous choisissez d'utiliser des collations, veuillez vous préparer à briser les changements à l'avenir.

Installation

Vous pouvez utiliser yarn ou npm pour installer des collations et ses dépendances.

avec du fil

yarn add ' ic-snacks '

avec NPM

npm install ' ic-snacks '

Installation des dépendances par les pairs

Snacks a quelques dépendances par les pairs nécessaires pour utiliser la bibliothèque.

Si vous avez déjà ces bibliothèques répertoriées dans les dépendances de votre application, il n'est pas nécessaire de les installer à nouveau.

Pour la bibliothèque des composants principaux:

Types d'accessoires V15 ou V16
@ Instacart / Radium V18 +
React v15 ou v16
Reactdom V15 ou V16

Si vous souhaitez utiliser des animations: React-Transition-Group V2.2

Le développement local comme dépendance

Parfois, il peut être utile de travailler sur ce projet localement et de visualiser les modifications d'une autre application. Cela peut être accompli en utilisant le lien NPM

 # 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

Pour inverser le processus, vous pouvez effectuer ce qui suit

 # go to the app you are working on
cd ../workspace/my_working_app
# remove symlink
npm unlink ic-snacks

avec du fil

yarn add @instacart/radium
yarn add prop-types
yarn add react
yarn add react-dom
yarn add react-transition-group

avec NPM

npm install @instacart/radium
npm install prop-types
npm install react
npm install react-dom
npm install react-transition-group

Usage

Utilisation d'un composant:

 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 >
  )
}

Un composant plus compliqué:

 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 >
    )
  }
}