DEV Community

Cover image for I Published today a React Component on NPM
Carlos Felix
Carlos Felix

Posted on

I Published today a React Component on NPM

#react #showdev #javascript #npm

👨‍💻Source code available on github

Sponge Bob

Hi everyone, today I published my first NPM package, it's called react-basic-json and it's a JSON viewer React Component.
This component receives a json to generate a Treeview. You can pass the data property as a javascript object like this:

import { BasicJSON } from 'react-basic-json'
const json = {
    make: 'Ford',
    model: 'Mustang',
    year: 1969,
    message: {
        mid: 'mid.1457764197618:41d102a3e1ae206a38',
        seq: 73
    }
};
<BasicJSON data={json}/>
Enter fullscreen mode Exit fullscreen mode

or you can pass a string representing a JSON as the data property:

const json ='{"make":"Ford","model":"Mustang","year":1969,"message":{"mid":"mid.1457764197618:41d102a3e1ae206a38","seq":73}}'
<BasicJSON data={json}/>
Enter fullscreen mode Exit fullscreen mode

You can install via NPM:

npm install react-basic-json
Enter fullscreen mode Exit fullscreen mode

Interested in the code? See the repository bellow:

GitHub logo carlosfrodrigues / react-basic-json

A basic JSON viewer made with React



...and the npm package page is https://www.npmjs.com/package/react-basic-json

I'd like to say that building a react component is a great experience that I recommend for everyone interest in React. It's a challenge that makes you feel good when you finish it.
Thank You!

Top comments (2)

Collapse
 
andrewbaisden profile image
Andrew Baisden •

Cool how long did it take for you to create this package? Always wondered how easy it is to publish npm packages.

Collapse
 
carlosfrodrigues profile image
Carlos Felix • • Edited

Publishing a npm package is a simple task. I used webpack to generate a bundle, you must have a npm account too. For react component I recommend this post: levelup.gitconnected.com/create-yo...
thanks for the comment