{"id":20764435,"url":"https://github.com/eliperelman/neutrino-preset-react-components","last_synced_at":"2026-03-09T12:04:37.511Z","repository":{"id":65457083,"uuid":"87457701","full_name":"eliperelman/neutrino-preset-react-components","owner":"eliperelman","description":"Create generic React components and previewing them without the need to embed in an application. Plays nicely with other Neutrino middleware, so you can build, test, preview, and publish multiple React components from a single repository.","archived":false,"fork":false,"pushed_at":"2017-10-12T14:50:36.000Z","size":543,"stargazers_count":61,"open_issues_count":2,"forks_count":3,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-09-27T23:53:09.383Z","etag":null,"topics":["neutrino","react","react-presets","webpack"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/eliperelman.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-04-06T17:41:30.000Z","updated_at":"2024-08-08T14:42:04.000Z","dependencies_parsed_at":"2023-01-24T13:00:15.397Z","dependency_job_id":null,"html_url":"https://github.com/eliperelman/neutrino-preset-react-components","commit_stats":null,"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"purl":"pkg:github/eliperelman/neutrino-preset-react-components","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/eliperelman%2Fneutrino-preset-react-components","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/eliperelman%2Fneutrino-preset-react-components/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/eliperelman%2Fneutrino-preset-react-components/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/eliperelman%2Fneutrino-preset-react-components/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/eliperelman","download_url":"https://codeload.github.com/eliperelman/neutrino-preset-react-components/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/eliperelman%2Fneutrino-preset-react-components/sbom","scorecard":{"id":372948,"data":{"date":"2025-08-11","repo":{"name":"github.com/eliperelman/neutrino-preset-react-components","commit":"02f6365e6e7073476f68dcdc779a793549902b53"},"scorecard":{"version":"v5.2.1-40-gf6ed084d","commit":"f6ed084d17c9236477efd66e5b258b9d4cc7b389"},"score":1.3,"checks":[{"name":"Code-Review","score":0,"reason":"Found 1/23 approved changesets -- score normalized to 0","details":null,"documentation":{"short":"Determines if the project requires human code review before pull requests (aka merge requests) are merged.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#code-review"}},{"name":"Token-Permissions","score":-1,"reason":"No tokens found","details":null,"documentation":{"short":"Determines if the project's workflows follow the principle of least privilege.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#token-permissions"}},{"name":"Packaging","score":-1,"reason":"packaging workflow not detected","details":["Warn: no GitHub/GitLab publishing workflow detected."],"documentation":{"short":"Determines if the project is published as a package that others can easily download, install, easily update, and uninstall.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#packaging"}},{"name":"Binary-Artifacts","score":10,"reason":"no binaries found in the repo","details":null,"documentation":{"short":"Determines if the project has generated executable (binary) artifacts in the source repository.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#binary-artifacts"}},{"name":"Maintained","score":0,"reason":"0 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0","details":null,"documentation":{"short":"Determines if the project is \"actively maintained\".","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#maintained"}},{"name":"Dangerous-Workflow","score":-1,"reason":"no workflows found","details":null,"documentation":{"short":"Determines if the project's GitHub Action workflows avoid dangerous patterns.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#dangerous-workflow"}},{"name":"Pinned-Dependencies","score":-1,"reason":"no dependencies found","details":null,"documentation":{"short":"Determines if the project has declared and pinned the dependencies of its build process.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#pinned-dependencies"}},{"name":"CII-Best-Practices","score":0,"reason":"no effort to earn an OpenSSF best practices badge detected","details":null,"documentation":{"short":"Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#cii-best-practices"}},{"name":"Security-Policy","score":0,"reason":"security policy file not detected","details":["Warn: no security policy file detected","Warn: no security file to analyze","Warn: no security file to analyze","Warn: no security file to analyze"],"documentation":{"short":"Determines if the project has published a security policy.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#security-policy"}},{"name":"Fuzzing","score":0,"reason":"project is not fuzzed","details":["Warn: no fuzzer integrations found"],"documentation":{"short":"Determines if the project uses fuzzing.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#fuzzing"}},{"name":"License","score":0,"reason":"license file not detected","details":["Warn: project does not have a license file"],"documentation":{"short":"Determines if the project has defined a license.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#license"}},{"name":"Signed-Releases","score":-1,"reason":"no releases found","details":null,"documentation":{"short":"Determines if the project cryptographically signs release artifacts.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#signed-releases"}},{"name":"Branch-Protection","score":0,"reason":"branch protection not enabled on development/release branches","details":["Warn: branch protection not enabled for branch 'master'"],"documentation":{"short":"Determines if the default and release branches are protected with GitHub's branch protection settings.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#branch-protection"}},{"name":"SAST","score":0,"reason":"SAST tool is not run on all commits -- score normalized to 0","details":["Warn: 0 commits out of 2 are checked with a SAST tool"],"documentation":{"short":"Determines if the project uses static code analysis.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#sast"}},{"name":"Vulnerabilities","score":0,"reason":"124 existing vulnerabilities detected","details":["Warn: Project is vulnerable to: GHSA-v88g-cgmw-v5xw","Warn: Project is vulnerable to: GHSA-whgm-jr23-g3j9","Warn: Project is vulnerable to: GHSA-fwr7-v2mv-hh25","Warn: Project is vulnerable to: GHSA-67hx-6x53-jw92","Warn: Project is vulnerable to: GHSA-832h-xg76-4gv6","Warn: Project is vulnerable to: GHSA-v6h2-p8h4-qcjw","Warn: Project is vulnerable to: GHSA-cwfw-4gq5-mrqx","Warn: Project is vulnerable to: GHSA-g95f-p29q-9xw4","Warn: Project is vulnerable to: GHSA-grv7-fg5c-xmjg","Warn: Project is vulnerable to: GHSA-x9w5-v3q2-3rhw","Warn: Project is vulnerable to: GHSA-wxhq-pm8v-cw75","Warn: Project is vulnerable to: GHSA-257v-vj4p-3w2h","Warn: Project is vulnerable to: GHSA-pxg6-pf52-xh8x","Warn: Project is vulnerable to: GHSA-3xgq-45jj-v275","Warn: Project is vulnerable to: GHSA-p28h-cc7q-c4fg","Warn: Project is vulnerable to: GHSA-9vvw-cc9w-f27h","Warn: Project is vulnerable to: GHSA-gxpj-cx7g-858c","Warn: Project is vulnerable to: GHSA-hr2v-3952-633q","Warn: Project is vulnerable to: GHSA-3wcq-x3mq-6r9p","Warn: Project is vulnerable to: GHSA-vh7m-p724-62c2","Warn: Project is vulnerable to: GHSA-r9p9-mrjm-926w","Warn: Project is vulnerable to: GHSA-434g-2637-qmqr","Warn: Project is vulnerable to: GHSA-49q7-c7j4-3p7m","Warn: Project is vulnerable to: GHSA-977x-g7h5-7qgw","Warn: Project is vulnerable to: GHSA-f7q4-pwc6-w24p","Warn: Project is vulnerable to: GHSA-fc9h-whq2-v747","Warn: Project is vulnerable to: GHSA-vjh7-7g9h-fjfh","Warn: Project is vulnerable to: GHSA-4gmj-3p3h-gm8h","Warn: Project is vulnerable to: GHSA-6h5x-7c5m-7cr7","Warn: Project is vulnerable to: GHSA-rv95-896h-c2vc","Warn: Project is vulnerable to: GHSA-qw6h-vgh9-j6wx","Warn: Project is vulnerable to: GHSA-qrmc-fj45-qfc2","Warn: Project is vulnerable to: GHSA-fjxv-7rqg-78g4","Warn: Project is vulnerable to: GHSA-mpcf-4gmh-23w8","Warn: Project is vulnerable to: GHSA-9qj9-36jm-prpv","Warn: Project is vulnerable to: GHSA-8r6j-v8pm-fqw3","Warn: Project is vulnerable to: MAL-2023-462","Warn: Project is vulnerable to: GHSA-xf7w-r453-m56c","Warn: Project is vulnerable to: GHSA-44pw-h2cw-w3vq","Warn: Project is vulnerable to: GHSA-jp4x-w63m-7wgm","Warn: Project is vulnerable to: GHSA-c429-5p7v-vgjp","Warn: Project is vulnerable to: GHSA-43f8-2h32-f4cj","Warn: Project is vulnerable to: GHSA-pfq8-rq6v-vf5m","Warn: Project is vulnerable to: GHSA-6x33-pw7p-hmpq","Warn: Project is vulnerable to: GHSA-c7qv-q95q-8v27","Warn: Project is vulnerable to: GHSA-qqgx-2p2h-9c37","Warn: Project is vulnerable to: GHSA-78xj-cgh5-2h22","Warn: Project is vulnerable to: GHSA-2p57-rm9w-gvfp","Warn: Project is vulnerable to: GHSA-7r28-3m3f-r2pr","Warn: Project is vulnerable to: GHSA-r8j5-h5cx-65gg","Warn: Project is vulnerable to: GHSA-2pr6-76vf-7546","Warn: Project is vulnerable to: GHSA-8j8c-7jfh-h6hx","Warn: Project is vulnerable to: GHSA-896r-f27r-55mw","Warn: Project is vulnerable to: GHSA-9c47-m6qq-7p4h","Warn: Project is vulnerable to: GHSA-76p3-8jx3-jpfq","Warn: Project is vulnerable to: GHSA-3rfm-jhwj-7488","Warn: Project is vulnerable to: GHSA-hhq3-ff78-jv3g","Warn: Project is vulnerable to: GHSA-fvqr-27wr-82fm","Warn: Project is vulnerable to: GHSA-4xc9-xhrj-v574","Warn: Project is vulnerable to: GHSA-x5rq-j2xg-h7qm","Warn: Project is vulnerable to: GHSA-jf85-cpcp-j695","Warn: Project is vulnerable to: GHSA-p6mc-m468-83gw","Warn: Project is vulnerable to: GHSA-29mw-wpgm-hmr9","Warn: Project is vulnerable to: GHSA-35jh-r3h4-6jhm","Warn: Project is vulnerable to: GHSA-pp57-mqmh-44h7","Warn: Project is vulnerable to: GHSA-4xcv-9jjx-gfj3","Warn: Project is vulnerable to: GHSA-952p-6rrq-rcjv","Warn: Project is vulnerable to: GHSA-wrvr-8mpx-r7pp","Warn: Project is vulnerable to: GHSA-f8q6-p94x-37v3","Warn: Project is vulnerable to: GHSA-vh95-rmgr-6w4m","Warn: Project is vulnerable to: GHSA-xvch-5gv4-984h","Warn: Project is vulnerable to: GHSA-w9mr-4mfr-499f","Warn: Project is vulnerable to: GHSA-ff6r-5jwm-8292","Warn: Project is vulnerable to: GHSA-r683-j2x4-v87g","Warn: Project is vulnerable to: GHSA-92xj-mqp7-vmcj","Warn: Project is vulnerable to: GHSA-wxgw-qj99-44c2","Warn: Project is vulnerable to: GHSA-5rrq-pxf6-6jx5","Warn: Project is vulnerable to: GHSA-8fr3-hfg3-gpgp","Warn: Project is vulnerable to: GHSA-gf8q-jrpm-jvxq","Warn: Project is vulnerable to: GHSA-2r2c-g63r-vccr","Warn: Project is vulnerable to: GHSA-cfm4-qjh2-4765","Warn: Project is vulnerable to: GHSA-x4jg-mjrx-434g","Warn: Project is vulnerable to: GHSA-rp65-9cf3-cjxr","Warn: Project is vulnerable to: GHSA-76c9-3jph-rj3q","Warn: Project is vulnerable to: GHSA-9wv6-86v2-598j","Warn: Project is vulnerable to: GHSA-rhx6-c78j-4q9w","Warn: Project is vulnerable to: GHSA-v62p-rq8g-8h59","Warn: Project is vulnerable to: GHSA-566m-qj78-rww5","Warn: Project is vulnerable to: GHSA-7fh5-64p2-3v2j","Warn: Project is vulnerable to: GHSA-hrpp-h998-j3pp","Warn: Project is vulnerable to: GHSA-hxcm-v35h-mg2x","Warn: Project is vulnerable to: GHSA-6g33-f262-xjp4","Warn: Project is vulnerable to: GHSA-p8p7-x288-28g6","Warn: Project is vulnerable to: GHSA-c2qf-rxjj-qqgw","Warn: Project is vulnerable to: GHSA-m6fv-jmcg-4jfg","Warn: Project is vulnerable to: GHSA-cm22-4g7w-348p","Warn: Project is vulnerable to: GHSA-c9g6-9335-x697","Warn: Project is vulnerable to: GHSA-2m39-62fm-q8r3","Warn: Project is vulnerable to: GHSA-mf6x-7mm4-x2g7","Warn: Project is vulnerable to: GHSA-j44m-qm6p-hp7m","Warn: Project is vulnerable to: GHSA-3jfq-g458-7qm9","Warn: Project is vulnerable to: GHSA-5955-9wpr-37jh","Warn: Project is vulnerable to: GHSA-f5x3-32g6-xq36","Warn: Project is vulnerable to: GHSA-g7q5-pjjr-gqvp","Warn: Project is vulnerable to: GHSA-72xf-g2v4-qvf3","Warn: Project is vulnerable to: GHSA-7p7h-4mm5-852v","Warn: Project is vulnerable to: GHSA-662x-fhqg-9p8v","Warn: Project is vulnerable to: GHSA-394c-5j6w-4xmx","Warn: Project is vulnerable to: GHSA-fhg7-m89q-25r3","Warn: Project is vulnerable to: GHSA-pv4c-p2j5-38j4","Warn: Project is vulnerable to: GHSA-46c4-8wrp-j99v","Warn: Project is vulnerable to: GHSA-9m6j-fcg5-2442","Warn: Project is vulnerable to: GHSA-hh27-ffr2-f2jc","Warn: Project is vulnerable to: GHSA-rqff-837h-mm52","Warn: Project is vulnerable to: GHSA-8v38-pw62-9cw2","Warn: Project is vulnerable to: GHSA-hgjh-723h-mx2j","Warn: Project is vulnerable to: GHSA-jf5r-8hm2-f872","Warn: Project is vulnerable to: GHSA-wr3j-pwj9-hqq6","Warn: Project is vulnerable to: GHSA-cf66-xwfp-gvc4","Warn: Project is vulnerable to: GHSA-4v9v-hfq4-rm2v","Warn: Project is vulnerable to: GHSA-9jgg-88mc-972h","Warn: Project is vulnerable to: GHSA-g78m-2chm-r7qv","Warn: Project is vulnerable to: GHSA-c4w7-xm78-47vh","Warn: Project is vulnerable to: GHSA-p9pc-299p-vxgp"],"documentation":{"short":"Determines if the project has open, known unfixed vulnerabilities.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#vulnerabilities"}}]},"last_synced_at":"2025-08-18T13:25:26.277Z","repository_id":65457083,"created_at":"2025-08-18T13:25:26.277Z","updated_at":"2025-08-18T13:25:26.277Z"},"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":30294713,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-03-09T11:12:22.024Z","status":"ssl_error","status_checked_at":"2026-03-09T11:10:54.577Z","response_time":61,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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":["neutrino","react","react-presets","webpack"],"created_at":"2024-11-17T10:51:39.008Z","updated_at":"2026-03-09T12:04:37.465Z","avatar_url":"https://github.com/eliperelman.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Neutrino React Components Preset\n[![NPM version][npm-image]][npm-url]\n[![NPM downloads][npm-downloads]][npm-url]\n[![Join Slack][slack-image]][slack-url]\n\n`neutrino-preset-react-components` is a Neutrino preset that supports creating generic React components and previewing\nthem without the need to embed in an application. Plays nicely with other Neutrino middleware, so you can build, test,\npreview, and publish multiple React components from a single repository.\n\n## Features\n\n- Extends partially from [neutrino-preset-react](https://neutrino.js.org/presets/neutrino-preset-react)\n- Zero upfront configuration necessary to start developing, building, and visually previewing a React component.\nMinimal code is needed to generate stories previewer.\n- Modern Babel compilation adding JSX and object rest spread syntax.\n- Support for React Hot Loader\n- Write JSX in .js or .jsx files\n- Support for importing web workers with `.worker.js` file extensions\n- Extends from [neutrino-preset-web](https://neutrino.js.org/presets/neutrino-preset-web)\n  - Modern Babel compilation supporting ES modules, **latest** major browser versions, async functions, and dynamic imports\n  - Webpack loaders for importing HTML, CSS, images, icons, fonts, and web workers\n  - Webpack Dev Server during development\n  - Hot module replacement support\n  - Easily extensible to customize your project as needed\n\n**Important! The Neutrino Web and React presets include babel-polyfill by default, but this preset does not. If you need\npolyfills in your library code, consider importing babel-polyfill, core-js, or other alternative.**\n\n## Requirements\n\n- Node.js v6.10+\n- Yarn or npm client\n- Neutrino v6\n- React, React DOM, and React Addons CSS Transition Group\n\n## Installation\n\n`neutrino-preset-react-components` can be installed via the Yarn or npm clients. Inside your project, make sure\n`neutrino` and `neutrino-preset-react-components` are development dependencies. You will also need React and React DOM\nfor actual component development.\n\n#### Yarn\n\n```bash\n❯ yarn add --dev neutrino neutrino-preset-react-components\n❯ yarn add react react-dom react-addons-css-transition-group\n```\n\n#### npm\n\n```bash\n❯ npm install --save-dev neutrino neutrino-preset-react-components\n❯ npm install --save react react-dom react-addons-css-transition-group\n```\n\nIf you want to have automatically wired sourcemaps added to your project, add `source-map-support`:\n\n#### Yarn\n\n```bash\n❯ yarn add source-map-support\n```\n\n#### npm\n\n```bash\n❯ npm install --save source-map-support\n```\n\n## Project Layout\n\n`neutrino-preset-react-components` follows the standard [project layout](https://neutrino.js.org/project-layout)\nspecified by Neutrino. This means that by default all project source code should live in a directory named `src` in the\nroot of the project. This includes JavaScript files that would be available to your compiled project.\n\nAll components should be their own module within a directory named `components` inside the source directory.\n\n## Quickstart\n\nAfter installing Neutrino and this preset, add a new directory named `src` in the root of the project, with\na single JS file named `stories.js` in it.\n\n```bash\n❯ mkdir src \u0026\u0026 touch src/stories.js\n```\n\nEdit your `src/stories.js` file with the following:\n\n```js\nimport React from 'react';\nimport { render } from 'react-dom';\nimport { Stories, Story, Props } from 'neutrino-preset-react-components/lib';\nimport YourCustomComponent from './components/YourCustomComponent';\n\nconst root = document.getElementById('root');\n\nrender((\n  \u003cStories\u003e\n    \u003cStory component={YourCustomComponent}\u003e\n      \u003cProps name=\"Default\" /\u003e\n      \u003cProps name=\"State A\" someProp=\"alpha\" /\u003e\n      \u003cProps name=\"State B w/ children\"\u003eChild!\u003c/Props\u003e\n    \u003c/Story\u003e\n  \u003c/Stories\u003e\n), root);\n```\n\nNow edit your project's package.json to add commands for starting the preview app, or building the components.\n\n```json\n{\n  \"scripts\": {\n    \"start\": \"neutrino start --use neutrino-preset-react-components\",\n    \"build\": \"neutrino build --use neutrino-preset-react-components\"\n  }\n}\n```\n\nIf you are using `.neutrinorc.js`, add this preset to your use array instead of `--use` flags:\n\n```js\nmodule.exports = {\n  use: ['neutrino-preset-react-components']\n};\n```\n\nStart the app, then open a browser to http://localhost:5000 to preview your components:\n\n#### Yarn\n\n```bash\n❯ yarn start\n✔ Development server running on: http://localhost:5000\n✔ Build completed\n```\n\n#### npm\n\n```bash\n❯ npm start\n✔ Development server running on: http://localhost:5000\n✔ Build completed\n```\n\n## Building\n\n`neutrino-preset-react-components` builds components to the `lib` directory by default when running `neutrino build`.\nUsing the quick start example above as a reference:\n\n```bash\n❯ yarn build\n\n✔ Building project completed\nHash: 453804a130a959d313a1\nVersion: webpack 2.6.1\nTime: 350ms\n                     Asset     Size  Chunks             Chunk Names\n    YourCustomComponent.js  4.12 kB       0  [emitted]  YourCustomComponent\nYourCustomComponent.js.map  4.11 kB       0  [emitted]  YourCustomComponent\n✨  Done in 3.69s.\n```\n\nYou can then publish these components to npm. When publishing your project to npm, consider excluding your `src`\ndirectory by using the `files` property to whitelist `lib`, or via `.npmignore` to blacklist `src`. Components are\ngenerated as UMD named modules, with the name corresponding to the component file name. e.g.\n`src/components/Custom/index.js` maps to `Custom`, as well as `src/components/Custom.js` mapping to `Custom`.\n\nThese modules are ES-compatible modules, so they can be `import`ed as expected. If you want to use them with CJS\n`require`, you'll need to use the `.default` property to access the default exports:\n\n```js\nconst YourCustomComponent = require('your-custom-component').default;\n```\n\nBy default this preset creates an individual entry point for every top-level component found in `src/components`.\n\n## Previewer Components\n\nThis preset exposes 3 React components from `neutrino-preset-react-component/lib` to generate a component previewer\ninterface:\n\n### Stories\n\nThe `\u003cStories /\u003e` component is the container for how a series of components should be rendered. It is responsible\nfor rendering the navigation menu, switching between components and component states, and rendering the selected\ncomponent.\n\nThe `\u003cStories /\u003e` component should be given 1 or more `\u003cStory /\u003e` components as children.\n\n```js\nimport React from 'react';\nimport { render } from 'react-dom';\nimport { Stories } from 'neutrino-preset-react-component/lib';\n\nconst root = document.getElementById('root');\n\nrender((\n  \u003cStories\u003e\n    ...\n  \u003c/Stories\u003e\n), root);\n```\n\n### Story\n\nThe `\u003cStory /\u003e` component defines how a particular component is previewed. It accepts a `component` property which\nis the component to preview.\n\nThe `\u003cStory /\u003e` component should be given 1 or more `\u003cProps /\u003e` components as children which will be used to\nrender the specified component upon selection.\n\n```js\nimport React from 'react';\nimport { render } from 'react-dom';\nimport { Stories, Story } from 'neutrino-preset-react-component/lib';\n\nconst root = document.getElementById('root');\n\nclass Example extends React.Component {}\n\nrender((\n  \u003cStories\u003e\n    \u003cStory component={Example}\u003e\n      ...\n    \u003c/Story\u003e\n  \u003c/Stories\u003e\n), root);\n```\n\n### Props\n\nThe `\u003cProps /\u003e` component defines what props are passed to the `\u003cStory /\u003e`'s component when this story is\nselected. All props and children passed to this `Props` will be passed as props to the component.\n\nThe `\u003cProps /\u003e` component should be given a `name` property for displaying in the `Stories` UI.\n\n```js\nimport React from 'react';\nimport { render } from 'react-dom';\nimport { Stories, Story, Props } from 'neutrino-preset-react-component/lib';\n\nconst root = document.getElementById('root');\n\nclass Example extends React.Component {\n  render() {\n    return \u003ch1\u003eHello {this.props.message || 'world'}\u003c/h1\u003e;\n  }\n}\n\nrender((\n  \u003cStories\u003e\n    \u003cStory component={Example}\u003e\n      \u003cProps name=\"Default\" /\u003e\n      \u003cProps name=\"With 'Internet'\" message=\"Internet\" /\u003e\n      \u003cProps name=\"With emphasis\" message=\"WORLD!!!\" /\u003e\n    \u003c/Story\u003e\n  \u003c/Stories\u003e\n), root);\n```\n\n![example gif](neutrino-react-components-example.gif)\n\n## Hot Module Replacement\n\nWhile `neutrino-preset-react-components` supports Hot Module Replacement for your app, it does require some\nchanges to the preview app in order to operate. The preview app should define split points for which to accept\nmodules (Components) to reload using `module.hot`. See the\n[React preset docs](https://neutrino.js.org/presets/neutrino-preset-react/#hot-module-replacement) for guidance.\n\n## Customizing\n\nTo override the build configuration, start with the documentation on [customization](https://neutrino.js.org/customization).\n`neutrino-preset-react-components` uses a few rules and plugins in addition to the ones in use by the React and Web presets.\nSee the [Web documentation customization](https://neutrino.js.org/presets/neutrino-preset-web#customizing)\nfor preset-specific configuration to override.\n\nBy default this preset creates an individual entry point for every top-level component found in `src/components`.\n\n### Rules\n\nThe following is a list of rules and their identifiers which can be overridden, in addition to the ones from the Web preset:\n\n| Name | Description | Environments |\n| ---- | ----------- | ------------ |\n| `style` | Allows importing CSS stylesheets from modules. Contains two loaders named `style` and `css`. Allows using CSS modules from project CSS files. | all |\n| `plain-style` | Allows importing CSS stylesheets from modules. Contains two loaders named `style` and `css`. Used for importing CSS files from node_modules; has CSS modules disabled. | all |\n\n### Plugins\n\nThe following is a list of plugins and their identifiers which can be overridden (in addition to the plugins used\nby the React/Web presets):\n\n_Note: Some plugins are only available in certain environments. To override them, they should be modified conditionally._\n\n| Name | Description | Environments |\n| ---- | ----------- | ------------ |\n| `banner` | Injects source-map-support into the entry point of your application if detected in `dependencies` or `devDependencies` of your package.json. | all but `development` |\n\nBy following the [customization guide](https://neutrino.js.org/customization) and knowing the rule, loader, and plugin IDs above,\nyou can override and augment the build by by providing a function to your `.neutrinorc.js` use array. You can also\nmake these changes from the Neutrino API in custom middleware.\n\n_Example: Change the name of the components directory:_\n\n```js\nmodule.exports = {\n  use: [\n    ['neutrino-preset-react-components', {\n      components: 'react-stuff' // now you can put your components in src/react-stuff/\n    }]\n  ]\n}\n```\n\n[npm-image]: https://img.shields.io/npm/v/neutrino-preset-react-components.svg\n[npm-downloads]: https://img.shields.io/npm/dt/neutrino-preset-react-components.svg\n[npm-url]: https://npmjs.org/package/neutrino-preset-react-components\n[slack-image]: https://neutrino-slack.herokuapp.com/badge.svg\n[slack-url]: https://neutrino-slack.herokuapp.com/\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Feliperelman%2Fneutrino-preset-react-components","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Feliperelman%2Fneutrino-preset-react-components","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Feliperelman%2Fneutrino-preset-react-components/lists"}