This is a demo UI component library created using React, TypeScript, Rollup, Storybook, Jest, and React Testing Library. It was created for an article update for LogRocket on how to create a UI component library in React. You can read the article here.
Visit my blog, Timonwa's Notes, for awesome technical contents like articles, code snippets, tech goodies, community projects and more.
You can install this demo UI library using npm:
npm install @timonwa/demo-ui-library
To use this demo UI library in your project, import the components you need from the library and use them in your React components.
import React from "react";
import { Input, Button } from "@timonwa/demo-ui-library";
function App() {
return (
<div>
<Input
id="name"
disabled={false}
label="Enter your name"
message="This field is required"
error={false}
success={false}
onChange={(e) => console.log(e.target.value)}
placeholder="Enter your name here"
/>
<Button
size="medium"
primary={true}
disabled={false}
text="Click me!"
onClick={() => alert("Button clicked!")}
/>
</div>
);
}
export default App;This library is a demo for learning purposes only and is not intended to be contributed to. You can fork the repository and use the code for your personal use or learning.
- Fork the repository.
- Clone the repository to your local machine.
- Install the dependencies using
npm install. - View the components in the browser using
npm run storybook. - Make your changes.
- Test the changes using
npm test. - Build the library using
npm run build. - Commit the changes and push them to your forked repository.
- Publish the package on npm.
- Install and use the package in your project.
This demo UI library is licensed under the MIT License.
More of my articles can be found in Timonwa's Notes. Connect with me on Twitter: @timonwa_
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent