Publishing TypeScript React components to NPM

Hey good question!

I recommend having a single higher level index.ts that gathers together everything you want to export from your library. Guessing from the folder structure you have pictured, you could have an index.ts at: src/index.ts

Which contains:

export { DualRangeSlider } from './components/DualRangeSlider'
export { DualVerticalRangeSlider } from './components/DualVerticalRangeSlider'
// etc

Then your build process just needs to point at that single index file to bundle up everything you want your library to expose.

I'm doing this in the example provided in the article, but it's probably not obvious because I only have a single example component to re-export. But that same pattern works for any number of components, as long as they each have an entry in the top-level index file.

I'll make an edit to the article to make this clearer when I have some time on the weekend 🙂

Rupert McKay What's the point in making an index.ts file that exports the component from the file it's already being exported from?

export { Button } from "./Button"

Is it just for having: import Button from 'Button'

instead of: import Button from 'Button/Button'

Steve Barakat

Yup, that's exactly it!

I want the code I write to be as easy to use as possible for people that depend on it. Maybe the difference between

from 'Button/Button'

and

from 'Button'

isn't much, but it is something I can do to help even if only a little. The tradeoff is it means I need to have a top-level index file that re-exports everything from a single entry point.

Honestly, I've not had much experience with workspaces.

My usual inclination would be to coordinate via npm packages. But I know that's not everyone's preference.

I'd be really interested to read a write-up on how exactly the build process I've described above would need to change in a multi-workspace monorepo.