React

Learn how to render your first form using the Joyfill React SDK.

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

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.


What’s Next