Snacks Download - Snacks Quellcode herunterladen

Snacks

Komponenten von Drittanbietern

v0.0.159

Herunterladen

Snacks

JavaScript -Komponentenbibliothek von Instacart

Bitte beachten Sie: Wir sind immer noch in der Bühne vor der Veröffentlichung. Wenn Sie sich für Snacks entscheiden, seien Sie bitte darauf vorbereitet, in Zukunft Änderungen zu brechen.

Installation

Sie können entweder yarn oder npm verwenden, um Snacks und seine Abhängigkeiten zu installieren.

mit Garn

yarn add ' ic-snacks '

mit NPM

npm install ' ic-snacks '

Peer -Abhängigkeiten installieren

Snacks hat einige Peer -Abhängigkeiten, die zur Verwendung der Bibliothek erforderlich sind.

Wenn Sie diese Bibliotheken bereits in den Abhängigkeiten Ihrer App aufgeführt haben, müssen sie nicht erneut installiert werden.

Für die Hauptkomponentenbibliothek:

Prop-Type V15 oder V16
@Instacart/Radium v18+
Reagieren v15 oder v16
Reactdom V15 oder V16

Wenn Sie Animationen verwenden möchten: React-Transpansition-Gruppe v2.2

Lokale Entwicklung als Abhängigkeit

Manchmal kann es hilfreich sein, lokal an diesem Projekt zu arbeiten und die Änderungen in einer anderen App anzusehen. Dies kann mit dem NPM -Link erreicht werden

 # 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

Um den Prozess umzukehren, können Sie Folgendes tun

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

mit Garn

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

mit NPM

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

Verwendung

Verwenden einer Komponente:

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

Eine kompliziertere Komponente:

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