add custom sections readme

Datawheel · Mar 29, 2023 · 8dcffe9 · 8dcffe9
1 parent fc60ab2
commit 8dcffe9
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 0 deletions.
diff --git a/example-next/pages/profile/[...members].js b/example-next/pages/profile/[...members].js
@@ -26,6 +26,8 @@ function ProfilePage({profile, formatters}) {
         profile={profile}
         linkify={profile => profile.reduce((href, member) => `${href}/${member.slug}/${member.memberSlug || member.id}`, "/profile")}
         // you can also specify the configuration for ProfileSearch here:
+        searchProps={{placeholder: "Seach profiles"}}
+        // and your custom sections mapping object:
         customSections={customSections}
         t={t}
       />

diff --git a/packages/next/README.md b/packages/next/README.md
@@ -121,3 +121,30 @@ export default function App(props) {
 }
 
 ```
+
+## Custom Sections
+
+If your CMS instance implements Custom Section, you can add custom JSX renderers to your profiles by passing a mapping object to the `Profile` component. For more information on the usage of Custom Sections see the `canon-cms` [documentation](https://github.com/Datawheel/canon/tree/master/packages/cms#custom-sections).
+
+Example:
+
+```jsx
+
+...
+
+const customSections = {
+  CustomSectionName: CustomSectionComponent
+}
+
+export default function ProfilePage(props) {
+  (...)
+  return (
+    <Profile
+      (...)
+      customSections={customSections}
+    />
+    );
+  }
+...
+
+```