Nejo JSON Viewer

Nejo is a React component that renders JSON objects in a pretty and customizable way, perfect for enhancing your application's data visualization.

Features

• 🚀 Easy to use
• 🎨 Customizable styles
• 🔧 Flexible configuration
• 📦 Lightweight

Installation

Install Nejo JSON Viewer using npm:

npm install nejo-json-viewer

Or using yarn:

yarn add nejo-json-viewer

Usage

Here's a basic example of how to use Nejo JSON Viewer in your React project:

import React from 'react';
import Nejo from 'nejo-json-viewer';

const MyComponent = () => {
  const data = {
    first_name: "Ivan",
    last_name: "Huay",
    age: 32,
    status: "Open to work"
  };

  return <Nejo jsonData={data} />;
};

export default MyComponent;

Custom Styles

You can easily customize the appearance of Nejo JSON Viewer by passing a className prop with custom CSS variables:

// custom-styles.scss
.custom {
  --main-spacing: 20px;
  --1x: 10px;
  --key-color: rgb(192, 113, 40);
  --text-color: rgb(2, 26, 21);
  --type-text-color: rgb(156, 37, 45);
  --type-number-color: rgb(168, 59, 134);
  --type-date-color: #c50808;
  --font-family: Arial, sans-serif;
  --font-size: 16px;
}

Then, in your React component:

import React from 'react';
import Nejo from 'nejo-json-viewer';

const MyComponent = () => {
  const data = { /* ... */ };

  return <Nejo jsonData={data} className={styles.custom} />;
};

API Reference

Prop	Type	Description
jsonData	Object	The JSON object to be rendered (required)
className	String	Custom CSS class name for styling

Demo

Check out the live Storybook demo to see Nejo JSON Viewer in action:

Storybook Demo

Using with Next.js

To use this module in a Next.js application, you need to configure Next.js to properly transpile the package. Follow these steps:

1. Install the package:

   npm install --save nejo-json-viewer
   

2. Create or update your next.config.js file in the root of your Next.js project with the following configuration:

   const path = require('path');
   
   module.exports = {
     webpack: (config, { defaultLoaders }) => {
       config.module.rules.push({
         test: /\.jsx?$/,
         include: [path.resolve(__dirname, 'node_modules/nejo-json-viewer')],
         use: [defaultLoaders.babel],
       });
   
       return config;
     },
     transpilePackages: ['nejo-json-viewer'],
   };

   This configuration does two things:

   • It tells webpack to use Babel to transpile the nejo-json-viewer package.
   • It adds nejo-json-viewer to the list of packages that Next.js should transpile.

3. You can now import and use the component in your Next.js pages or components:

   import NejoJsonViewer from 'nejo-json-viewer';
   
   export default function MyPage() {
     const data = { key: "value", nested: { array: [1, 2, 3] } };
     return <NejoJsonViewer data={data} />;
   }

Note: If you're using TypeScript, you might need to add type declarations for the package. Create a nejo-json-viewer.d.ts file in your project's @types directory:

declare module 'nejo-json-viewer' {
  import { ComponentType } from 'react';
  
  export const NejoJsonViewer: ComponentType<{ data: any }>;
}

Remember to restart your Next.js development server after making these changes to ensure they take effect.

Development

To run the Storybook for this component locally:

1. Clone the repository:

   git clone https://github.com/ivanhuay/nejo-json-viewer.git

2. Install dependencies:

   cd nejo-json-viewer
   npm install

3. Run Storybook:

   npm run storybook

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

License

This project is licensed under the MIT License

About the Project

Nejo JSON Viewer was created as part of a portfolio project during a job search journey. The name "Nejo" comes from "NEw JOb" (NE-JO), reflecting the creator's commitment to continuous learning and growth in the tech industry.

---

If you find Nejo JSON Viewer helpful, please consider giving it a star on GitHub and sharing it with others!