npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@redheadphone/react-json-grid

v0.9.2

Published

React Component that converts JSON to nested grid tables.

Downloads

50,282

Readme

React JSON Grid

The library react-json-grid provides the React component JSONGrid, which is a user-friendly and versatile tool that enables you to effortlessly transform nested JSON objects or arrays into structured nested grid tables. This component has got you covered when dealing with big and complex JSON data, allowing you to display it in an organized manner.

Features

  • 🛠️ Ease of Integration: Seamlessly incorporate the component into your React applications without any hassle and no dependencies.
  • 🗂️ Nested JSON Support: Handle deeply nested JSON structures with ease, creating nested structured grid tables that are collapsible and expandible.
  • Highlight Magic: Select and highlight specific cells, rows, or columns in the grid tables to enhance the user interface and facilitate interaction.
  • 🔍 Search Spotlight: Enhance the visibility of your JSON data with a search feature that effectively highlights cells matching with the search text.
  • 🎨 Customizable Styling: Tailor the appearance of the grid to match your application's design using custom theme.

Install

Run the following command in your React project directory:

npm install @redheadphone/react-json-grid

You can also use other package managers like yarn or pnpm, if preferred.

Usage

Here's an example of how to use the react-json-grid library:

import JSONGrid from '@redheadphone/react-json-grid'

function ExampleComponent() {
  const data = {
    "id": "0001",
    "type": "donut",
    "name": "Cake",
    "ppu": 0.55,
    "batters": {
      "batter": [
        { "id": "1001", "type": "Regular" },
        { "id": "1002", "type": "Chocolate" },
        { "id": "1003", "type": "Blueberry" },
        { "id": "1004", "type": "Devil's Food" }
      ]
    },
    "topping": [
      { "id": "5001", "type": "None" },
      { "id": "5002", "type": "Glazed" },
      { "id": "5005", "type": "Sugar" },
      { "id": "5007", "type": "Powdered Sugar" },
      { "id": "5006", "type": "Chocolate with Sprinkles" },
      { "id": "5003", "type": "Chocolate" },
      { "id": "5004", "type": "Maple" }
    ]
  }

  return <JSONGrid data={data} />
}

Props

The JSONGrid component supports the following props:

| Name | Type | Description | Default | | --------------------- | -------- | --------------------------------------------------------------------- | ------------- | | data | object | The JSON object or array to be transformed into a grid table. | undefined | | defaultExpandDepth | number | The depth to which the grid is expanded by default. | 0 | | defaultExpandKeyTree | object | Tree-like structure with all keys that needs to be expanded. | undefined | | onSelect | function | Event to obtain selected cell's keyPath | (keyPath)=>{} | | highlightSelected | boolean | Whether to highlight the selected cell or not. | true | | searchText | string | The text that needs to be searched in the JSON data. | undefined | | theme | string | The theme name that needs to be applied. | 'default' | | customTheme | object | The customTheme object which specify color code of each part of grid. | {} |

Themes

Available Themes

  • default
  • dracula
  • monokai
  • oceanicPark
  • panda
  • gruvboxMaterial
  • tokyoNight
  • remedy
  • atlanticNight
  • defaultLight
  • defaultLight2
  • slime
  • spacegray
  • blueberryDark
  • nord
  • nightOwl
  • oneMonokai
  • cobaltNext
  • shadesOfPurple
  • codeBlue
  • softEra
  • atomMaterial
  • evaDark
  • moonLight

Note: Pass one of above themes as a string in the theme prop. You can contribute your custom theme in themes.js if you want.

Custom Theme Object Format

{
  "bgColor": "#222",
  "borderColor": "#b5b5b5",
  "selectHighlightBgColor": "#3b3b3b",
  "cellBorderColor": "#474747",
  "keyColor": "#ffffff",
  "indexColor": "#949494",
  "numberColor": "#6c99bb",
  "booleanColor": "#6c99bb",
  "stringColor": "#a5c261",
  "objectColor": "#ffffff",
  "tableHeaderBgColor": "#444",
  "tableIconColor": "#ffffff",
  "searchHighlightBgColor": "#565a36"
}

Note: These fields override original theme fields, so all fields are not mandatory. All field values need to be strings that are accepted by CSS for color.

Acknowledgements