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>