Snacks

간식

Instacart의 JavaScript 구성 요소 라이브러리

참고 : 우리는 아직 출시 전 단계에 있습니다. 간식을 사용하기로 선택하면 향후 변화를 끊을 준비를하십시오.

설치

yarn 또는 npm 사용하여 스낵 및 그 종속성을 설치할 수 있습니다.

원사와 함께

yarn add ' ic-snacks '

NPM과 함께

npm install ' ic-snacks '

피어 종속성 설치

간식에는 라이브러리를 사용하는 데 필요한 몇 가지 동료 의존성이 있습니다.

앱 의존성에 이미 이러한 라이브러리가 나열된 경우 다시 설치할 필요가 없습니다.

기본 구성 요소 라이브러리 :

• Prop-Types v15 또는 v16
• @Instacart/Radium V18+
• 반응 v15 또는 v16
• Reactdom v15 또는 v16

애니메이션을 사용하려면 : React-Transition-Group v2.2

의존으로서의 지역 개발

때로는이 프로젝트에서 로컬로 작업하고 다른 앱의 변경 사항을 보는 것이 도움이 될 수 있습니다. 이것은 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

프로세스를 되돌리려면 다음을 수행 할 수 있습니다

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

원사와 함께

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

NPM과 함께

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

용법

구성 요소 사용 :

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

더 복잡한 구성 요소 :

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

전체 문서

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

기여

기여 문서를 참조하십시오