Skip to content

Commit 7d2b196

Browse files
committed
Add documementation on ChunkCollection and ChunkProperty components. WIP.
1 parent 82ba349 commit 7d2b196

File tree

3 files changed

+37
-17
lines changed

3 files changed

+37
-17
lines changed

README.md

Lines changed: 35 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -12,8 +12,8 @@ npm install editmode-react
1212

1313
### Step 1:
1414

15-
Within your React app, navigate to the index file in your src directory.
16-
Import the Editmode wrapper and wrap your App within:
15+
Within your React app, navigate to the index file within your src directory.
16+
Import the Editmode wrapper and wrap your App within.
1717

1818
```
1919
import { Editmode } from "editmode-react";
@@ -34,33 +34,53 @@ document.getElementById("root")
3434
#### Rendering a chunk:
3535

3636
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.
37-
You can also provide default content as a fallback should anything go wrong trying to retrieve the data from the API:
37+
You can provide default content as a fallback should anything go wrong trying to retrieve the data from the API:
3838

3939
```
4040
import { Chunk } from "editmode-react";
4141
4242
function Example() {
4343
return (
4444
<div>
45-
<p>
46-
<Chunk identifier="cnk_123"/>
47-
</p>
48-
<p>
49-
<Chunk identifier="cnk_321">
50-
I have default content
51-
</Chunk>
52-
</p>
53-
</div>
45+
<p>
46+
<Chunk identifier="cnk_123"/>
47+
</p>
48+
<p>
49+
<Chunk identifier="cnk_321">
50+
I have default content
51+
</Chunk>
52+
</p>
53+
</div>
5454
);
5555
}
5656
```
5757

58-
Alternatively, if you are using one of our **text editor plugins** and would like to create a new chunk directly from the editor, you may select the piece of text you would like to convert and hit CMD+SHIFT+L. (For Visual Studio Code users, you can also hit CMD+SHIFT+P to open the command pallete, type "Editmode: Create Chunk" and hit enter).
58+
Alternatively, if you are using one of our **text editor plugins** and would like to create a new chunk directly from the editor, you may select the piece of text you would like to convert and hit CMD+SHIFT+L. (For Visual Studio Code users, you can also hit CMD+SHIFT+P to open the command palette, type "Editmode: Create Chunk" and hit enter).
5959

6060
#### Rendering a chunk collection:
6161

62-
TBC
62+
Chunk collections are simply a way to categorise chunks and can be used to render repeatable content.
63+
Each collection can contain many properties and each property can hold different types of information.
64+
65+
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 (ie all chunks within the Team Member collection). You can do this by passing the chunk collection identifier as a prop to the ChunkCollection component. To render the name, title and headshot for each team member, pass the identifiers for each property as a prop to the ChunkProperty component:
66+
67+
```
68+
import { ChunkCollection, ChunkProperty } from "editmode-react";
69+
70+
function Example() {
71+
return (
72+
<section className="meet_the_team">
73+
<ChunkCollection identifier="lst_123" className="team_member">
74+
<h2><ChunkProperty identifier="prop_001" className="name"/><h2>
75+
<h5><ChunkProperty identifier="prop_002" className="title"/></h5>
76+
<ChunkProperty identifier="prop_003" className="headshot"/>
77+
</ChunkCollection>
78+
</section>
79+
);
80+
}
81+
```
82+
This will render editable headings containing the name and title and an image containing the headshot for every person in the "Team Member" collection.
6383

6484
### Step 3:
6585

66-
You can now edit 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.
86+
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.

0 commit comments

Comments
 (0)