Editmode for React

Editmode allows you to turn plain text in your React app into easily inline-editable bits of content that can be managed by anyone with no technical knowledge.

Installation

NPM

npm install editmode-react

Yarn

Usage

Step 1:

Within your React app, navigate to the index file within your src directory. Import the Editmode wrapper and wrap your App within.

Basic Setup

import { Editmode } from "editmode-react";

// 👉 `project_id` can be found in the URL:
// https://editmode.com/projects/{project_id}/chunks

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

Specifying a branch

Specifying default content

Step 2:

Rendering a chunk:

If you have already created the chunk you would like to render on the Editmode CMS, you can simply pass the identifier as a prop and begin editing. You can provide default content as a fallback should anything go wrong trying to retrieve the data from the API:

Render an editable chunk

import { Chunk } from "editmode-react";

function Example() {
  return (
    <section>
    
      {/* Reference a standalone chunk using the chunk identifier */}
      <Chunk identifier="cnk_7019e843b76e2d0395ab" />
      
      {/* You can also reference a chunk using its content key */}
      <Chunk identifier="company_name" />
      
      {/* Provide default content when referencing a chunk */}
      {/* Default content is a precaution that will get rendered in 
          the event that the content cannot be served from the Editmode API.
      */}
      <Chunk identifier="company_name">
        Our Company
      </Chunk> 
      
    </section>
  );
}

Render a hybrid chunk field

Specify classes

Rendering a chunk collection:

Chunk collections are simply a way to group chunks and can be used to render repeatable content. Each collection can contain many properties and each property can hold different types of information.

A good use case example would be creating a "Team Member" collection. It may have Full Name, Title and Headshot properties. Within your React app, you may want to display the name, title and headshot of all your team members (i.e. all chunks within the Team Member collection). You can do this by passing the chunk collection identifier as a prop to the ChunkCollection component. For example...

Basic collections w/ inline editing

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

function Example() {
  return (
    <section className="testimonials">
    
      {/* Render content from a collection, with inline editing */}
      <ChunkCollection identifier="col_MFxBu6fiTyRM" >   
        <ChunkFieldValue identifier="fld_LscoanYMdCOy" />  
        <ChunkFieldValue identifier="fld_Iq94B0LyQxGc" />   
        <ChunkFieldValue identifier="fld_LyRI6y3v2D8ct" />
      </ChunkCollection>
      
      {/* Use content keys for better readability */}
      <ChunkCollection identifier="testimonials" >   
        <ChunkFieldValue identifier="Name" />  
        <ChunkFieldValue identifier="Role" />   
        <ChunkFieldValue identifier="Comment" />
      </ChunkCollection>
      
      {/* Only render collection items with certain tags */}
      <ChunkCollection identifier="testimonials" tags={["home_testimonials"]}>   
        <ChunkFieldValue identifier="Name" />  
        <ChunkFieldValue identifier="Role" />   
        <ChunkFieldValue identifier="Comment" />
      </ChunkCollection>

    </section>
  );
}

Going Deeper

ChunkCollection Attributes

Attribute	Type	Description
identifier	string	Takes the id of a collection you want to loop through
limit	int string	optional The number of collection items you want to display
tags	array	optional Filter collection items based on tags listed in this prop
className	string	optional Class name(s) that will be added along with “chunks-collection-wrapper” to the main collection <div> element
itemClass	string	optional Class name(s) that will be added along with “chunks-collection-item–wrapper” to all collection items

ChunkFieldValue Attributes

Attribute	Type	Description
identifier	string	Takes the identifier or field_name of a collection field
className	string	optional Class name(s) that will be added in the chunk em-span element

Variables

Variables that are created in the Editmode CMS are also supported by passing an object prop as variables.

function Example() {
  return (
    <section>
      <Editmode projectId="prj_h3Gk3gFVMXbl">
        <Chunk identifier="welcome_message" variables={{ "name": "John" }} />
      </Editmode>
    </section>
  );
}

With this, chunks such as Hello, {{name}}! will be parsed as Hello, John!

Image Transformations

Editmode is capable of performing all kinds of transformations on your images before they're rendered within your web app or web site

The transformation attribute is used to perform real-time image transformations to deliver perfect images to the end-users.

// This chunk should render an image with 200 x 200 dimension
<Chunk identifier='cnk_23123123' transformation="w-200 h-200" />

// For image inside a collection
<ChunkCollection identifier="col_123...">
    <ChunkFieldValue identifier='Avatar' transformation="w-200 h-200"  />
</ChunkCollection>

Image Transformation Properties

Using the Magic Editor

You can now edit and save all of the chunks in your React app from within the browser - just add editmode=1 as a query string parameter to the current URL to initialize the Magic Editor.