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

👨‍💻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