Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/alioguzhan/react-typescript-library
A template to create a React component / library with Typescript
https://github.com/alioguzhan/react-typescript-library
react react-library react-typescript-module typescript
Last synced: 3 months ago
JSON representation
A template to create a React component / library with Typescript
- Host: GitHub
- URL: https://github.com/alioguzhan/react-typescript-library
- Owner: alioguzhan
- License: mit
- Created: 2020-02-23T14:49:05.000Z (almost 5 years ago)
- Default Branch: main
- Last Pushed: 2023-12-01T00:20:41.000Z (about 1 year ago)
- Last Synced: 2024-10-04T12:49:42.377Z (4 months ago)
- Topics: react, react-library, react-typescript-module, typescript
- Language: TypeScript
- Homepage:
- Size: 2.04 MB
- Stars: 35
- Watchers: 3
- Forks: 10
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
# React Typescript Library Template
A template to create a react component / library with Typescript.
- React
- Typescript
- Rollup
- Css Modules
- Jest with code coverage report
- `Typedoc` for API documentation
- `commitlint` for conventional-commits
- `Prettier` and `ESLint` integration with git hooks
- Optional `example app` generation for testing
- `Github Pages` integration
- Release-Please workflow
## Install
Clone the repository:
```
git clone --depth 1 [email protected]:alioguzhan/react-typescript-library.git
```
Rename the cloned folder to your library/component name:
```
mv react-typescript-library my-react-lib
```
Install the deps:
```bash
cd my-react-lib
yarn install
```
Once the installation is completed, A prompt will welcome you. Answer those questions and the installer will bootstrap the environment for you.
> You can check if there are any outdated package with [npm-check-updates](https://www.npmjs.com/package/npm-check-updates) tool.
## Development
Write your library code to `src/index.tsx` file and run:
```
yarn start
```
This will watch your changes and reloads the server.
### Commit Messages
This setup expects you to follow conventional-commits format. There is a husky command runs before every commit for validation.
To learn more about conventional commits see [its website](https://www.conventionalcommits.org/en/v1.0.0/).
You can remove that section from `package.json` also remove the related package(s):
```
yarn remove -D @commitlint/cli
```
## Build
Run:
```
yarn build
```
This will create your compiled files under `./dist` folder. And generates a documentation with `TypeDoc` under `./docs` folder.
## Test
Jest is configured and ready to use. Just run:
```
yarn test
```
## Docs
This template uses [TypeDoc](https://typedoc.org/) by default.
Run `yarn make:docs` and a folder named `docs` will be created in your root directory. Just open `index.html` in your browser to see if your like it or not.
## CREDITS
- Logo Design by [@fyunusyildiz](https://github.com/fyunusyildiz)