Editmode for React

yarn add editmode-react

import { Editmode } from "editmode-react";

// Branches are used to create separate "versions" of your content, which can
// be useful for staging, running a/b tests, or developing locally on teams.
// Branches are created within the content hub at https://app.editmode.com
// Specifying a branch id when initializing Editmode will load all content
// from that specific branch.

ReactDOM.render(
  <React>
    <Editmode projectId={project_id} branchId={branch_id}>
      <App />
    </Editmode>
  </React>,
  document.getElementById("root")
);

import { Editmode } from "editmode-react";
import { defaultChunks } from "./data/defaultChunks";

// Editmode is smart about fetching and caching content to ensure that 1. Your
// app/site always remains fast, and 2. Users always see the most recent content.
// While Editmode is capable of loading content direct from our CDN, some 
// customers like to also bundle a resource file within their codebase that will 
// provide content in the event that the API fails. This can 
// be achieved by passing an object with default content to the Editmode provider
// on initialization. The creation of this file can be automated via our API.
// See https://snack.expo.io/@editmode/algolia-demo for an interactive demo
// of this setup

ReactDOM.render(
  <React>
    <Editmode projectId={project_id} defaultChunks={defaultChunks} >
      <App />
    </Editmode>
  </React>,
  document.getElementById("root")
);

import { Chunk } from "editmode-react";


function Example() {
  return (
    <section>
      
      {/* Editmode has two types of chunks - "standalone" and "hybrid". 
          Standalone chunks can only store a single piece of content,
          whereas hybrid (or collection) chunks can have many fields.
          These fields are pre-specified in the Content Hub at 
          https://app.editmode.com
      */}
      
      <Chunk identifier="home_hero" field="Headline" />
      <Chunk identifier="home_hero" field="Tagline" />
      <Chunk identifier="home_hero" field="Description" />
      
    </section>
  );
}

import { Chunk } from "editmode-react";

// By default, an editable chunk is rendered to the client as an unstyled <em-span />
// This can cause unwanted behaviour from a styling perspective, so you can tell 
// Editmode to add a class to the wrapper.

function Example() {
  return (
    <section>
      <Chunk identifier="company_name" className="bg-white rounded shadow p-6" />
    </section>
  );
}

import { ChunkCollection, ChunkFieldValue, getChunk } from "editmode-react";

// Often, when iterating through a collection of content, your UI will need 
// to access the raw values, instead of rendering inline-editable chunks. 
// For this we use getChunk(), along with ChunkCollection.

function Example() {
  return (
    <section className="meet_the_team">
      <ChunkCollection identifier="navigation_items">
        {(getChunk, chunk) => {
          return (
            if (getChunk(chunk, "Title")) {
            
              {/* Render an editable inline field */}
              <ChunkFieldValue identifier="Title" />
              
              {/* Render a link using the chunk field values*/}
              <a href={getChunk(chunk, "Url")}>
                {getChunk(chunk, "Title")}
              </a>
            }
          )
        }}
      </ChunkCollection>
    </section>
  );
}