@nju33/react-json v0.1.38

react-json

Install

yarn add @nju33/react-json
yarn add react @types/react

Example

For example in the below, I'm using wp-api.

import {Json, JsonComponent} from '@nju33/react-json';

const enum WPStatus {
  Publish = 'publish',
  Future = 'future',
  Draft = 'draft',
  Pending = 'pending',
  Private = 'private'
}
interface WPEmbedded {
  'wp:featuredmedia': {source_url: string}[]
}
interface WPData {
  title: {rendered: string};
  link: string;
  status: WPStatus;
  _embedded: WPEmbedded
}

// WPData is the types of the wp-api's response data
const WPJson = Json as JsonComponent<WPData[]>

<WPJson url="http://xxxxxx.com/wp-json/wp/v2/posts?per_page=4&_embed">
  {({fetchSupport, data}) => {
    if (!fetchSupport) {
      return <p>In this browser, `fetch` api hasn't been support.</p>
    }

    if (data === undefined) {
      return <p>Loading...</p>
    }

    const elements = data.map(post => {
      return (
        <a>
          <img
            src={post._embedded['wp:featuredmedia'][0].source_url}
            style={{
              width: '8em'
            }}
          />
          <div>{post.title.rendered}</div>
        </a>
      );
    });

    return <ul>{elements}</ul>;
  }}
</WPJson>