开源软件名称(OpenSource Name):HarveyD/react-component-library开源软件地址(OpenSource Url):https://github.com/HarveyD/react-component-library开源编程语言(OpenSource Language):JavaScript 70.2%开源软件介绍(OpenSource Introduction):React Component LibraryThis project skeleton was created to help people get started with creating their own React component library using: It also features:
Read my blog post about why and how I created this project skeleton ▸ Check out this CodeSandbox to see the component library in action ▸ DevelopmentTesting
Building
StorybookTo run a live-reload Storybook server on your local machine:
To export your Storybook as static files:
You can then serve the files under Generating New ComponentsI've included a handy NodeJS util file under
This will generate:
The default templates for each file can be modified under Don't forget to add the component to your Installing Component Library LocallyLet's say you have another project (
which will install the local component library as a dependency in
Your components can then be imported and used in that project. NOTE: After installing the component library locally, you may run into:
This is the most commonly encountered problem people face when installing the library locally. This is most likely due to the third reason: Normally when a library is published, dev dependencies are excluded. However, when the library is symlinked, all local dev depdendencies are persisted in the libraries
OR, if you are using Webpack in app you can follow this GitHub comment. Read more about this issue here. PublishingHosting via NPMFirst, make sure you have an NPM account and are logged into NPM using the Then update the
The Hosting via GitHubI recommend you host the component library using NPM. However, if you don't want to use NPM, you can use GitHub to host it instead. You'll need to remove You can then install your library into other projects by running:
OR
UsageLet's say you created a public NPM package called Usage of the component (after the library installed as a dependency into another project) will be: import React from "react";
import { TestComponent } from "harvey-component-library";
const App = () => (
<div className="app-container">
<h1>Hello I'm consuming the component library</h1>
<TestComponent theme="primary" />
</div>
);
export default App; Check out this Code Sandbox for a live example. Using Component Library SASS VariablesI've found that it's helpful to export SASS variables to projects consuming the library. As such, I've added the For example, let's say you installed @import '~harvey-component-library/build/typography';
.example-container {
@include heading;
color: $harvey-white;
} Additional HelpDark ModeThe example component This is achieved by using the media query: Read https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme for more details. Using Alternatives to SassLess or StylusThe Rollup plugin
You can then remove CSS ModulesIf you want to use CSS Modules, update
Styled ComponentsIf you want to use Component Code SplittingCode splitting of your components is not supported by default. Read this section of my blog post to find out how and why you would enable code splitting of your components. In summary, code splitting enables users to import components in isolation like:
This can reduce the bundle size for projects using older (CJS) module formats. You can check out this branch or this commit to see what changes are neccesary to implement it. Please note, there's an issue with code splitting and using Supporting Image ImportsAdd the following library to your component library @rollup/plugin-image:
Then add it to
You can then import and render images in your components like: import logo from "./rollup.png";
export const ImageComponent = () => (
<div>
<img src={logo} />
</div>
); Supporting JSON ImportsAdd the following library to your component library @rollup/plugin-json:
Then add it to
You can then import and use JSON as ES6 Modules: import data from "./some-data.json";
export const JsonDataComponent = () => <div>{data.description}</div>; Checkout the official Rollup plugin list for additional helpful plugins. |
2023-10-27
2022-08-15
2022-08-17
2022-09-23
2022-08-13
请发表评论