@haensl/react-json-schema

Simple JSON+LD schema React component.

Render JSON+LD structured data aka microdata into <script> tags. Works as recommended by Next.js.

Installation

Via npm

$ npm install -S @haensl/react-json-schema

Via yarn

$ yarn add @haensl/react-json-schema

Usage

This component is not pre-compiled, but exposed as ESModule.

import JSONSchema from '@haensl/react-json-schema';

const MyComponent = (props) => {
  const organization = {
    '@context': 'https://schema.org/',
    '@type': 'Organization',
    '@id': 'https://acme.com',
    url: 'https://acme.com',
    name: 'ACME'
  };

  return (
    <div>
      <JSONSchema json={ organization } />

      // your markup...
    </div>
  )
};

export default MyComponent;

Example: Usage with Next.js

// Example next.config.js for adding a loader that will transpile @haensl/react-json-schema
module.exports = {
  webpack: (config, { defaultLoaders }) => {
    config.module.rules.push({
      test: /@haensl\/react-json-schema/,
      use: [
        defaultLoaders.babel,
      ]
    });

    return config;
  }
};

Synopsis

@haensl/react-json-schema

The component will not render (i.e. return null) when it is not given JSON data.

Refer to https://schema.org for information on structured data.

  import JSONSchema from '@haensl/react-json-schema'

  <JSONSchema
    // A JSON schema object.
    // See https://schema.org
    json={{
      '@context': 'https://schema.org/',
      '@type': 'Organization',
      '@id': 'https://acme.com',
      url: 'https://acme.com',
      name: 'ACME'
    }}
  />

Renders to

<script type="application/ld+json">{
  "@context":"https://schema.org/",
  "@type":"Organization",
  "@id":"https://acme.com",
  "url":"https://acme.com",
  "name":"ACME"
}</script>

Changelog

License