Overview of JSX components and prop usage with "jsx-info"

twitter logo github logo ・1 min read

Very cool tool by Brian Mock, which shows an overview of your component props and their usage in a codebase:

wavebeem / jsx-info

Displays a report of JSX component and prop usage

jsx-info

Displays a report of JSX component and prop usage.

Watch my demonstration video for more information.

Why

First of all, I thought it would be cool to see all this info. But more importantly, I think jsx-info can be used to help refactor your code.

Let's say you have a component called <DataTable> that takes 43 different props. If you needed to rewrite <DataTable> from scratch, you might not want to keep as many different props. Using jsx-info you could analyze which props get used the most and start porting that functionality first.

If the usage of a particular prop is very low, you might even choose to get rid of that prop and rewrite the calling code to use something else instead.

The intended workflow here is to run jsx-info and compare the data with your prop-types or TypeScript/Flow type definitions to find discrepencies.

Installation

Automatically install and…

Let's say you have a component called <DataTable> that takes 43 different props. If you needed to rewrite <DataTable> from scratch, you might not want to keep as many different props. Using jsx-info you could analyze which props get used the most and start porting that functionality first.

twitter logo DISCUSS
Classic DEV Post from Feb 15

What was your win this week?

Got to all your meetings on time? Started a new project? Fixed a tricky bug?

Martin Beierling-Mutz profile image
I ❀️ developing across the full tech stack, especially using React & Node. Also GameDev & ML.

dev.to now has dark mode.

Go to the "misc" section of your settings and select night theme ❀️