DEV Community

Sankalp Swami
Sankalp Swami

Posted on • Originally published at aviyel.com

Tools That Have Made React Documentation A Piece of Cake

Full article is available on Aviyel
React Component Documentation
If you are a front end developer, chances are; you already had used React at least once till now. It all started with Facebook’s decision to launch live chat integrations to the platform, way back in 2013. The task was complex, maybe more complex than Facebook’s UI architecture with untraceable DOM mutation in those days. And then React saw the light of the day!
React fixed the DOM race conditions plaguing Facebook’s UI for a while through ‘Flux’ architecture to control DOM mutations and deploying an irreversible component state. It got so popular with time that a Stack Overflow survey in 2019 crowned React as the sixth most used framework in the dev circle. Today, most tech companies including Bloomberg, Air Bnb and Discord use React for their overall UI and UX architectures.

As far as React’s documentation is concerned, the dev economy is already filled with tons of tools where each platform has an edge over others. In the post, I have curated a number of tools I used for React documentation.

PS: Just because I prefer these tools for my documentation needs, you don’t have to buy them. However, the purpose is to serve developers an exhaustive list they can put out for consideration.

Tools I Use to Document React Component

Docz

Docz

Professional projects require regular documentation, period. What would you answer when your peer asks if a particular component has already been built or need source code at one place to configure a bug in your product? Well, you’d be needing a robust documentation tool here; one that saves time, and you can get through its UX hassle-free.

In that case,Docz is my first preference. Why? It has a Gatsby foundation so you can easily develop dynamic websites at a fast pace. Moreover, it’s already stuffed with all general use-cases so you won’t need external configurations to work your way around. Another feature that you may want to consider is Docz’s support of MDX formats. That way, you’ll be able to navigate through the standard remark/rehype ecosystem, and access MDX plugins during curating your docs. Plus, the changes are deployed live while you are writing down your documentation.

Documenting React Components with Docz

  • Use  yarn add docz --dev to install Docz. Write some MDX files in your space and run docz dev
  • All your results would be available at http://localhost:3000
  • To publish, use docz build and a static version of your doc will be generated.
  • A typical docz .mdx file has a front-matter a-la Jekyll, some imports and markdown mixed with components, like this:
--------
name: Button
menu: Components
route: /components/button

--------

import Button from './Button'# 

The button

I am in love with the Button Component

<Button>Click</Button>
Enter fullscreen mode Exit fullscreen mode
  • Check out custom themes for steps to add more properties to your doc created with the above snippet.
  • You can also use import { Playground, PropsTable } from "docz"; built-in components to write standard docs.
  • <PropsTable /> take your React components and display them in a neatly formatted table consisting of properties. By default, the properties available are: name, default value, type, and description.
Button.propTypes = {

  /**

   * I want an inverted component button 

   */
  inverted: PropTypes.bool
};

Button.defaultProps = {

  inverted: true 
};
Enter fullscreen mode Exit fullscreen mode
  • Also Docz’s Playground Component helps to render React components in docs and creates tables with valuable content describing the React components with live-editable code below the rendered component.

You can always create u=custom themes and plugins with Docz. To save time, use the ones already curated by the community.

Other super tools are waiting for you here on Aviyel. Follow this link if you want to save your precious time which you are wasting on building custom documentation sites.

CONNECT WITH ME

Discussion (8)

Collapse
sean_miller profile image
Sean Miller

While this seems like a great tool. The title is a bit misleading, I was expecting a list of tools you use rather than an explanation on Docz

Collapse
lukeshiru profile image
LUKESHIRU • Edited on

The Content Policy states that:

Posts must contain substantial content — they may not merely reference an external link that contains the full post.

So please, put the full post here.

Thanks!

Collapse
ritacosta profile image
ritaCosta93

Cool, I've been looking for a tool to document my own learning experience, like save the bits of code and little self tutorials, Docz seems like a good option for that. I've been using Notion, but it's not perfect for coding notes.

Collapse
fireping32 profile image
Prakhar Gurunani

My 3 minutes of curiosity wasted :(

Collapse
optimbro profile image
Rahul

Clickbait! 🥺

Collapse
rexgalilae profile image
RexGalilae

Low effort plug. Reported

Collapse
russelmelroydsouza8 profile image
RusselMelroydsouza8

Informative!!

Collapse
sonangrai profile image
Sonahang Rai

Title should have tool rather than tools.
i was hoping to see lists of tools but it has description of a single one.