https://github.com/michal-wrzosek/react-component-lib

Boilerplate repo for creating npm packages with React components written in TypeScript and using styled-components
https://github.com/michal-wrzosek/react-component-lib

create-react-app library react-components rollup styled-components typescript

Last synced: 3 days ago
JSON representation

Boilerplate repo for creating npm packages with React components written in TypeScript and using styled-components

• Host: GitHub
• URL: https://github.com/michal-wrzosek/react-component-lib
• Owner: michal-wrzosek
• License: mit
• Created: 2019-03-21T21:52:03.000Z (almost 6 years ago)
• Default Branch: master
• Last Pushed: 2024-12-16T03:25:39.000Z (about 1 month ago)
• Last Synced: 2025-01-12T09:05:20.263Z (10 days ago)
• Topics: create-react-app, library, react-components, rollup, styled-components, typescript
• Language: TypeScript
• Homepage: https://medium.com/@xfor/developing-publishing-react-component-library-to-npm-styled-components-typescript-cc8274305f5a
• Size: 1.37 MB
• Stars: 74
• Watchers: 3
• Forks: 20
• Open Issues: 6
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# react-component-lib

This is a boilerplate repository for creating npm packages with React components written in TypeScript and using styled-components.

Medium article explaining step by step how to use this repo to publish your own library to NPM:

https://medium.com/@xfor/developing-publishing-react-component-library-to-npm-styled-components-typescript-cc8274305f5a

## Installation:

To install all dependencies run:

```

npm i

```

It will install:

- `dependencies` and `devDependencies` from ./package.json

- `peerDependencies` from ./package.json thanks to `install-peers`

- `dependencies` and `devDependencies` from ./example-nextjs/package.json (example `nextjs` app for testing)

## Developing your library:

To start developing your library, run `npm run dev`. It will build your library and run example `nextjs` app where you can test your components. Each time you make changes to your library or example app, app will be reloaded to reflect your changes.

## Styled-components:

Developing library with components built with styled-components is challenging because you have to keep only one instance of styled-components. If you would just symlink your library (`file:../` or `npm link`) to example app that is also using styled-components you'll get a console warning about multiple instances of styled-components (even though styled-components are peer dependency) and your styles will be possibly broken. To be able to conveniently develop styled components I am injecting bundled files directly into example app's /src folder and importing it in `client.tsx` file along with type declaration.

## Typescript

This boilerplate lets you develop your libraries in Typescript and you can simultaneously test it in Typescript example nextjs app.