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

json-view-for-react

v2.0.1

Published

A JSON view that you can style using CSS, inline-styles or CSS-in-JS.

Downloads

785

Readme

JSON View for React

npm JavaScript Style Guide

This is a syntax highlighter for a JSON object. It works by walking the object tree.

Most syntax highlighters will render into a PRE and then use regular expressions to find the syntax. This approach works great when you want to support lots of different languages - or anything other than JSON in fact!

I created this component because I wanted a non-trivial test case for exploring what a well behaved reusable component should be. At the time of writing, I think a reusable component is one that:

  • Generates semantically valid HTML along with accessibility tags.
  • Generates class names where the host can override the prefix (Allowing the host to ensure uniqueness of css names and avoid CSS class name collision).
  • Include example CSS within the documentation but not bundled or built into the component.
  • Does not rely on storybook or bit etc (Great tools, but shouldn't be needed)

The CSS class names are a pretty important part of this.

If the component does not allow other components to be embedded inside, then CSS class name collision is avoidable. Just use sensible selectors, all will be well.

However, if a component allows you to pass children that can be rendered inside, then the wrapping component must use explicit and prefixed class names.

The screenshot below shows the JSON view with the CSS below applied.

Screenshot

Usage

Pass any object to the obj property of the JsonView component.

You can optionally pass a value to cssPrefix to ensure that the css class names don't clash with the ones in your host application. The default value is jsonview.

import React from 'react'
import { JsonView } from 'json-view-for-react'

function Example () {
  return <JsonView obj={{ hello: 'world' }} cssPrefix='external_json_view' showLineNumbers highlightedLineNumbers={[2, 4]} />
}

Property Name | Description ---|--- obj | A JSON object to be displayed. cssPrefix | A value to be prefixed before all classNames. A hyphen is added too. showLineNumbers | An optional boolean that indicates if line numbers should be displayed next to each line. highlightedLineNumbers | An array of line numbers that should be displayed highlighted.

Styling

The component will add classes to all the elements that it creates. Below is an example CSS block that assumes you're using default cssPrefix of jsonview.

   <style>
    .jsonview-code {
        display: block;
        padding: 0.5rem;
        background-color: rgb(40, 44, 52);
        color: rgb(136, 198, 190);
        overflow-x: scroll;
        border-radius: 5px;
      }

      .jsonview-line { white-space: nowrap; }
      .jsonview-hi-line { white-space: nowrap; background-color: rgb(80, 80, 95); }

      .jsonview-str { color: rgb(121, 182, 242); }
      .jsonview-num { color: rgb(255, 255, 200); }
      .jsonview-bool { color: rgb(197, 165, 197); }
      .jsonview-null { color: rgb(197, 165, 197); }
      .jsonview-prop { color: rgb(250, 200, 99); }

      .jsonview-ln {
        display: inline-block;
        padding-right: 1rem;
        color: rgb(178, 178, 178);
        text-align: right;
        user-select: none;
      }
   </style>

Development

Run npm start to launch a test page with hot reload.

Run npm test to run the tests, 100% coverage required to pass.

Run npm run build to build the distributable version that can be imported into other react projects.

Deployment

A push to the master branch triggers Github Actions CI/CD to run.

If the tests run successfully then the library is versioned, released on Github and published in NPM.

The versioning is semantic based on the presence of --fix, --feat or --break within the commit comments since the previous release.

License

MIT.