Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/Timonwa/demo-ui-library
A demo on how to create a React UI component library using React, Typescript, Rollup, Storybook, Jest and React testing library.
https://github.com/Timonwa/demo-ui-library
article beginner-friendly beginner-project component-library demo react-lib turorial ui-library
Last synced: 5 days ago
JSON representation
A demo on how to create a React UI component library using React, Typescript, Rollup, Storybook, Jest and React testing library.
- Host: GitHub
- URL: https://github.com/Timonwa/demo-ui-library
- Owner: Timonwa
- License: mit
- Created: 2023-05-06T10:44:52.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-09-13T08:24:51.000Z (about 2 months ago)
- Last Synced: 2024-10-29T22:26:10.117Z (9 days ago)
- Topics: article, beginner-friendly, beginner-project, component-library, demo, react-lib, turorial, ui-library
- Language: TypeScript
- Homepage:
- Size: 473 KB
- Stars: 37
- Watchers: 1
- Forks: 20
- Open Issues: 1
-
Metadata Files:
- Readme: readme.md
- License: license
Awesome Lists containing this project
- jimsghstars - Timonwa/demo-ui-library - A demo on how to create a React UI component library using React, Typescript, Rollup, Storybook, Jest and React testing library. (TypeScript)
README
# My Demo UI Library
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](https://blog.logrocket.com/author/pelumiakintokun/) on how to create a UI component library in React. You can read the article [here](https://blog.logrocket.com/build-component-library-react-typescript/).
Visit my blog, [Timonwa's Notes](https://blog.timonwa.com), for awesome technical contents like articles, code snippets, tech goodies, community projects and more.
## Installation
You can install this demo UI library using npm:
```
npm install @timonwa/demo-ui-library
```
## Usage
To use this demo UI library in your project, import the components you need from the library and use them in your React components.
```jsx
import React from "react";
import { Input, Button } from "@timonwa/demo-ui-library";
function App() {
return (
console.log(e.target.value)}
placeholder="Enter your name here"
/>
alert("Button clicked!")}
/>
);
}
export default App;
```
## Contributing
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.
### Steps
- 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](https://www.npmjs.com/).
- Install and use the package in your project.
## License
This demo UI library is licensed under the [MIT License](https://github.com/Timonwa/demo-ui-library/blob/main/license).
## Connect
More of my articles can be found in [Timonwa's Notes](https://blog.timonwa.com). Connect with me on Twitter: [@timonwa\_](https://twitter.com/timonwa_)