Snacks

Bocadillos

Biblioteca de componentes de JavaScript por Instacart

Tenga en cuenta: todavía estamos en la etapa previa al lanzamiento. Si opta por usar bocadillos, prepárese para romper los cambios en el futuro.

Instalación

Puede usar yarn o npm para instalar bocadillos y sus dependencias.

con hilo

yarn add ' ic-snacks '

con npm

npm install ' ic-snacks '

Instalación de dependencias de pares

Los bocadillos tienen algunas dependencias de pares necesarias para usar la biblioteca.

Si ya tiene estas bibliotecas enumeradas en las dependencias de su aplicación, no hay necesidad de instalarlas nuevamente.

Para la biblioteca de componentes principales:

• Tipos de propagación V15 o V16
• @Instacart/Radium V18+
• Reaccionar v15 o v16
• Reactdom v15 o v16

Si desea usar animaciones: React-Transition-Group v2.2

Desarrollo local como dependencia

A veces puede ser útil trabajar en este proyecto localmente y ver los cambios en otra aplicación. Esto se puede lograr usando el enlace 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

Para revertir el proceso, puede hacer lo siguiente

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

con hilo

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

con npm

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

Uso

Usando un componente:

 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 componente más complicado:

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

Documentación completa

https://instacart.github.io/snacks/

Que contribuye

Consulte los documentos que contribuyen