{"id":19010412,"url":"https://github.com/instacart/snacks","last_synced_at":"2025-04-06T05:15:38.955Z","repository":{"id":23541668,"uuid":"87229772","full_name":"instacart/Snacks","owner":"instacart","description":"The Instacart Component Library","archived":false,"fork":false,"pushed_at":"2023-07-19T09:49:45.000Z","size":19617,"stargazers_count":79,"open_issues_count":52,"forks_count":37,"subscribers_count":50,"default_branch":"master","last_synced_at":"2024-03-25T21:22:59.735Z","etag":null,"topics":["component-library","components","design","instacart","javascript","style","styleguide"],"latest_commit_sha":null,"homepage":"https://instacart.github.io/Snacks/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/instacart.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.MD","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null}},"created_at":"2017-04-04T20:04:07.000Z","updated_at":"2024-03-25T21:22:59.736Z","dependencies_parsed_at":"2023-02-15T08:02:06.422Z","dependency_job_id":"c83b7a9d-d943-4cab-a804-ece32fd2d400","html_url":"https://github.com/instacart/Snacks","commit_stats":{"total_commits":423,"total_committers":34,"mean_commits":"12.441176470588236","dds":0.5579196217494089,"last_synced_commit":"e6161fc0863265b4d5012bc12b84c0c0792e6da3"},"previous_names":[],"tags_count":127,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/instacart%2FSnacks","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/instacart%2FSnacks/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/instacart%2FSnacks/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/instacart%2FSnacks/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/instacart","download_url":"https://codeload.github.com/instacart/Snacks/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247436285,"owners_count":20938533,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["component-library","components","design","instacart","javascript","style","styleguide"],"created_at":"2024-11-08T19:11:07.194Z","updated_at":"2025-04-06T05:15:38.932Z","avatar_url":"https://github.com/instacart.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"[Snacks](https://instacart.github.io/Snacks/)\n=========================\n[![npm](https://img.shields.io/npm/v/ic-snacks.svg?style=flat-square)](https://www.npmjs.com/package/ic-snacks) [![license](https://img.shields.io/npm/l/ic-snacks.svg?style=flat-square)](https://github.com/instacart/Snacks/blob/master/LICENSE) [![CircleCI](https://circleci.com/gh/instacart/Snacks.svg?style=shield)](https://circleci.com/gh/instacart/Snacks) \n[![Maintainability](https://api.codeclimate.com/v1/badges/2d104053b9eea615a68b/maintainability)](https://codeclimate.com/github/instacart/Snacks/maintainability) [![Code Coverage](https://codecov.io/gh/instacart/Snacks/branch/master/graph/badge.svg)](https://codecov.io/gh/instacart/Snacks)\n[![Coverage Status](https://coveralls.io/repos/github/instacart/Snacks/badge.svg?branch=try_coveralls)](https://coveralls.io/github/instacart/Snacks?branch=try_coveralls)\n\n\nJavaScript Component Library by Instacart\n\nPlease note: We're still in pre-release stage. If you opt to use Snacks, please be prepared for breaking changes in the future.\n\n## Installation\nYou can use either `yarn` or `npm` to install Snacks and its dependencies.\n\n### with yarn\n```sh\nyarn add 'ic-snacks'\n```\n\n### with npm\n```sh\nnpm install 'ic-snacks'\n```\n### Installing peer dependencies\nSnacks has a few peer dependencies required to use the library.\n\u003e If you already have these libraries listed in your app's dependencies, there's no need to install them again.\n\nFor the main component library:\n- prop-types v15 or v16\n- @instacart/radium v18+\n- React v15 or v16\n- ReactDom v15 or v16\n\nIf you'd like to use animations: react-transition-group v2.2\n\n### Local Development as a dependancy\nSometimes it may be helpful to work on this project locally and view the changes in another app. This can be accomplished using npm link\n\n```sh\n# From this directory\nnpm link\n# go to the app you are working on\ncd ../workspace/my_working_app\n# symlink this app\nnpm link ic-snacks\n```\n\nTo reverse the process, you can do the following\n\n```sh\n# go to the app you are working on\ncd ../workspace/my_working_app\n# remove symlink\nnpm unlink ic-snacks\n```\n\n\n#### with yarn\n```sh\nyarn add @instacart/radium\nyarn add prop-types\nyarn add react\nyarn add react-dom\nyarn add react-transition-group\n```\n\n#### with npm\n```sh\nnpm install @instacart/radium\nnpm install prop-types\nnpm install react\nnpm install react-dom\nnpm install react-transition-group\n```\n\n## Usage\n\nUsing a component:\n```js\nimport { CircleButton } from 'ic-snacks'\n\nconst MyComponent = props =\u003e {\n  const doYes = e =\u003e { alert('Snacks are the best!') }\n  const doNo = e =\u003e { alert('Wrong choice, choose again.') }\n\n  return (\n    \u003cdiv\u003e\n      \u003cp\u003eDo you love snacks?\u003c/p\u003e\n      \u003cCircleButton onClick={doYes}\u003eYes\u003c/CircleButton\u003e\n      \u003cCircleButton onClick={doNo}\u003eNo\u003c/CircleButton\u003e\n    \u003c/div\u003e\n  )\n}\n```\n\nA more complicated component:\n```js\nimport React, { Component } from 'react'\nimport { NavigationPills } from 'ic-snacks'\n\nconst choices = [\n  { text: 'bananas' },\n  { text: 'carrots' },\n  { text: 'watermelon' },\n  { text: 'snacks' },\n  { text: 'kale' },\n  { text: 'endives' },\n  { text: 'arugula' },\n  { text: 'spinach' },\n  { text: 'potatoes' }\n]\n\nclass Navigation extends Component {\n  static state = {\n    activePill: choices[0]\n  }\n\n  render() {\n    return (\n      \u003cdiv\u003e\n        \u003cNavigationPills\n          pills={ choices }\n          onPillClick={(e, choice) =\u003e {\n            e.preventDefault();\n            setState({ activePill: choice.text })\n            console.log('Choice clicked!', choice)\n          }}\n          label='Favorite healthy snack:'\n          activePill={state.activePill}\n        /\u003e\n      \u003c/div\u003e\n    )\n  }\n}\n```\n\n## Full Documentation\nhttps://instacart.github.io/Snacks/\n\n## Contributing\nPlease see [contributing docs](https://github.com/instacart/Snacks/blob/master/CONTRIBUTING.MD)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Finstacart%2Fsnacks","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Finstacart%2Fsnacks","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Finstacart%2Fsnacks/lists"}