DEV Community

Cover image for 6 Tools for Documenting Your React Components Like a Pro

6 Tools for Documenting Your React Components Like a Pro

Eden Ella on August 16, 2019

What good are components if nobody can understand how to find and use them? React encourages you to build modular applications with comp...
Collapse
 
chrisachard profile image
Chris Achard

I hadn't seen bit.dev before... interesting. How does it compare to say, sharing a storybook or docz for team collaboration? It appears fairly similar; but contributors can publish one component at a time?

Collapse
 
giteden profile image
Eden Ella

Bit’s main mission is to maximize code reuse and to allow for a more fine-grained collaboration.
To that end, they have had to tackle two main obstacles on the way:

  1. Sharing and collaborating on individual code components/ modules requires cumbersome solutions like monorepos - you can read more about it here: monorepos- please don't

  2. More often than not, modules/components are simply not adopted by the team/organization (and are repeatedly re-written by the team members) because of either poor discoverability or simply because the components may require modifications to be used on their host projects and no tools are available to pull-request changes for a specific component or to push and share the modified component as a new component.

Bit solves these problems by tracking your component’s (with all their dependencies, specs, etc.) - all you have to do is configure your components’ folder (or manually choose individual files/folders) - then you can export (all of) them to Bit’s cloud (with a single command) where others can discover them, install them like packages (using NPM or Yarn) or import them to their projects (using Bit), and collaborate on them on their local projects).

There’s no need for long and tiresome configuration - you simply “tell” Bit where the components are and it does the rest by itself - it even builds and tests each component in isolation before exporting it to Bit’s cloud.

Whenever a new version of a component (that is installed on your project) is available, Bit notifies you so you may choose to update you local component.

After sharing components, they can easily be found on Bit’s cloud with a great UI and search engine.

When you find your component, you can tweak it and see it render on Bit’s live playground (before installing it)

Collapse
 
chrisachard profile image
Chris Achard

Ah, that's neat - I'll have to try it out. I like the idea of no tiresome configuration :)

Thanks for the explanation!

Collapse
 
msm8 profile image
John Brooks

Nice post. Thanks!

Collapse
 
sasi3093 profile image
sasi3093

Can we add additional fields along with the Properties? "Name,Type,Default,Description" Along with that if we want to add additional properties, is that possible