This package has been deprecated

    Author message:

    Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

    gatsby-tinacms-json
    TypeScript icon, indicating that this package has built-in type declarations

    0.43.3 • Public • Published

    gatsby-tinacms-json

    A Gatsby/Tina plugin for editing JSON files stored in git.

    Installation

    yarn add gatsby-plugin-tinacms gatsby-tinacms-git gatsby-tinacms-json
    

    Setup

    Include gatsby-plugin-tinacms, gatsby-tinacms-git, and gatsby-tinacms-json in your config:

    gatsby-config.js

    module.exports = {
      // ...
      plugins: [
        // ...
        {
          resolve: 'gatsby-plugin-tinacms',
          options: {
            plugins: ['gatsby-tinacms-git', 'gatsby-tinacms-json'],
          },
        },
      ],
    }

    Creating JSON Forms

    There are two approaches to registering JSON forms with Tina. The approach you choose depends on whether the React template is a class or function.

    1. useJsonForm: A Hook used when the template is a function.
    2. JsonForm: A Render Props component to use when the template is a class component.

    Note: required query data

    In order for the JSON forms to work, you must include the following fields in your dataJson graphql query:

    • rawJson
    • fileRelativePath

    An example dataQuery in your template might look like this:

    query DataQuery($slug: String!) {
      dataJson(fields: { slug: { eq: $slug } }) {
        id
        firstName
        lastName
    
        rawJson
        fileRelativePath
      }
    }
    

    Additionally, any fields that are not queried will be deleted when saving content via the CMS.

    useJsonForm

    This is a React Hook for creating Json Forms. This is the recommended approach if your template is a Function Component.

    In order to use a form you must register it with the CMS. There are two main approaches to register forms in Tina: page forms and screen plugins. Please refer to the form concepts doc to get clarity on the differences.

    Interface

    useJsonForm(data): [values, form]

    Arguments

    • data: The data returned from a Gatsby dataJson query.

    Return

    • [values, form]
      • values: The current values to be displayed. This has the same shape as the data argument.
      • form: A reference to the CMS Form object. The form is rarely needed in the template.

    Example

    src/templates/blog-post.js

    import { usePlugin } from 'tinacms'
    import { useJsonForm } from 'gatsby-tinacms-json'
    
    function BlogPostTemplate(props) {
      // Create the form
      const [data, form] = useJsonForm(props.data.dataJson)
    
      // Register it with the CMS
      usePlugin(form)
    
      return <h1>{data.firstName}</h1>
    }

    JsonForm

    JsonForm is a Render Props based component for accessing CMS Forms.

    This Component is a thin wrapper of useJsonForm and usePlugin. Since React Hooks are only available within Function Components you will need to use JsonForm if your template is Class Component.

    Props

    • data: The data returned from a Gatsby dataJson query.
    • render({ data, form }): JSX.Element: A function that returns JSX elements
      • data: The current values to be displayed. This has the same shape as the data in the Json prop.
      • form: A reference to the CMS Form object. The form is rarely needed in the template.

    src/templates/blog-post.js

    import { JsonForm } from 'gatsby-tinacms-json'
    
    class DataTemplate extends React.Component {
      render() {
        return (
          <JsonForm
            data={this.props.data.dataJson}
            render={({ data }) => {
              return <h1>{data.firstName}</h1>
            }}
          />
        )
      }
    }

    Content Creator

    JsonCreatorPlugin: contstructs a content-creator plugin for JSON files.

    interface JsonCreatorPlugin {
      label: string
      fields: Field[]
      filename(form: any): Promise<string>
      data?(form: any): Promise<any>
    }

    Example

    import { JsonCreatorPlugin } from 'gatsby-tinacms-json'
    
    const CreatePostPlugin = new JsonCreatorPlugin({
      label: 'New JSON File',
      filename: form => {
        return form.filename
      },
      fields: [
        {
          name: 'filename',
          component: 'text',
          label: 'Filename',
          placeholder: 'content/data/puppies.json',
          description:
            'The full path to the new Markdown file, relative to the repository root.',
        },
      ],
    })

    Install

    npm i gatsby-tinacms-json

    DownloadsWeekly Downloads

    544

    Version

    0.43.3

    License

    Apache-2.0

    Unpacked Size

    50.2 kB

    Total Files

    9

    Last publish

    Collaborators

    • kldavis4
    • spbyrne
    • jamespohalloran
    • scottgallant
    • tinacmsbot
    • forestry_chris
    • jeffsee55
    • jpatters
    • dwalkr