next-tinacms-json

next-tinacms-json

The next-tinacms-json package provides helpers to make local JSON content editable. This package is intended to be used with a Git-based workflow.

Installation

yarn add next-tinacms-json

API

Export	Description
JsonFile	A interface representing a JSON file stored on the local filesystem in Git.
useJsonForm	React Hook that creates a TinaCMS Form Plugin for editing a JsonFile.

JsonFile

The JsonFile interface represents a JSON file stored on the local filesystem in Git.

export interface JsonFile {
  fileRelativePath: string
  data: any
}

Name	Description
fileRelativePath	The path to the file relative to the root of the Git repository.
data	The parsed data from the JSON file.

useJsonForm

The useJsonForm function is a React Hook creates a TinaCMS Form Plugin for editing a JsonFile.

import { Form, FormOptions } from "tinacms"

export function useJsonForm(
  jsonFile: JsonFile,
  options?: FormOptions
):[any, Form]

The useJsonForm hook accepts a JsonFile and an optional FormOptions object. It returns an array with containing the current values aand the Form.

Example: pages/index.js

import { usePlugin } from 'tinacms'
import { useJsonForm } from 'next-tinacms-json'

export default function Index({ jsonFile }) {
  // Create the Form
  const [homePage, homePageForm] = useJsonForm(jsonFile)

  // Register it with the CMS
  usePlugin(homePageForm)

  return <h1>{homePage.title}</h1>
}

export async function getStaticProps() {
  const content = await import(`../../content/index.json`)

  return {
    props: {
      jsonFile: {
        fileRelativePath: `/content/index.json`,
        data: content.default,
      },
    },
  }
}