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.
yarn add next-tinacms-json| 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. |
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. |
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,
},
},
}
}