Prerequisites

To get the most out of this guide, you’ll need the following:

Complete the Setup Guide
A User Access Token (see setup guide)
A Template Identifier (see setup guide)

Requirements

React and React DOM v17+
Review SDK README

1. Install

npm install --save @joyfill/components

yarn add @joyfill/components

2. Usage

Add the Template identifier from the previous setup step to the App.js file.
Add the User Access Token from the preview setup step to the api.js file.

import React, { useState, useEffect } from 'react';
import { retrieveTemplate } from './api.js';

/**
 * Import JoyDoc SDK
 */
import { JoyDoc } from '@joyfill/components';

function App() {

  const [ template, setTemplate ] = useState(null);

  /**
   * Add your template identifier
   */
  const identifier = '<REPLACE_WITH_TEMPLATE_IDENIFIER>';

  /**
   * Retrieve template via the Joyfill API 
   */
  useEffect(() => {

    const handleRetrieveTemplate = async () => {
      const response = await retrieveTemplate(identifier);
      setTemplate(response);
    };

    handleRetrieveTemplate();

  }, []);

  return (
    <JoyDoc
      mode="edit"
      doc={template}
      onChange={(changelogs, data) => {

        /**
         * Changelogs represent the individual change that was made
         * Data represents the entire data structure with all new changes applied.
         */
        console.log('>>>>>>>: ', changelogs, data);

      }}
    />
  );
}

export default App;

const userAccessToken = "<REPLACE_USER_ACCESS_TOKEN>";
const apiBaseUrl = "https://api-joy.joyfill.io";

export const retrieveTemplate = async (identifier) => {

  //See API Doc Here: https://docs.joyfill.io/reference/retrieve-a-template
  const response = await fetch(`${apiBaseUrl}/v1/templates/${identifier}`, {
    method: 'GET',
    mode: 'cors',
    headers: {
      Authorization: `Bearer ${userAccessToken}`,
      'Content-Type': 'application/json'
    },
  });

  const data = await response.json();
  return data;
}

3. Try it yourself

If you’re looking for a full react example project that shows many more of the Joyfill SDK capabilities and workflows then head over to our full example project and try it for yourself.