- Notifications
You must be signed in to change notification settings - Fork1
Components for integrating the Wurd CMS in a React app
License
NotificationsYou must be signed in to change notification settings
wurdcms/wurd-react
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
Wurd is a service that lets you integrate a CMS into any website or app in minutes. This module provides components for integrating content and inline editing into your React app as easily as possible.
importwurdfrom'wurd-react';import{marked}from'marked';wurd.connect('my-app',{editMode:true,markdown:marked,// Optional for enabling markdown() mode});wurd.load('shared,homepage').then(content=>{//Access content via gettersdocument.title=content.text('homepage.title');//Use blocks for accessing subsections of contentconstpage=content.block('homepage');ReactDOM.render(<div><h1><content.Textid="shared.company"/></h1><h2><page.Textid="title"/></h2><page.Imageid="hero.image"width="300"/><page.Textid="hero.title"/></div>,document.getElementById('root'));});
See more in theexamples folder or run them withnpm run example.
Using NPM:
npm install wurd-react- Create a Wurd account and app
- Connect to a Wurd app with
wurd.connect('appName', {editMode: true}) - Load top level 'sections' of content you'll be using with
wurd.load('section') - In your views/templates etc., use the provided components to integrate content and editing functionality:
<WurdText/>
Creates an editable text region.
<content.Textid="title",// Required type="h1", // Defaults to `span` vars={{name:'John'}},// Replaces mustache style tokens (e.g. `{{name}}`) with the given data // Other standard props (className, style etc.) can be passed too/>
Creates an editable image (<img>).
<content.Imageid="hero.image",//Required // Other standard props (className, style etc.) can be passed too/>
Creates an editable text region that displays formatted Markdown.
NOTE: This uses dangerouslySetInnerHTML,read up on it here.
<content.Markdownid="home.intro",// Requiredtype="div",// Defaults to `div` vars={{name:'John'}},// Replaces mustache style tokens (e.g. `{{name}}`) with the given data // Other standard props (className, style etc.) can be passed too/>
Creates an editable list of content. The children passed will represent an item in the list.
<content.Listid="team.members"//Requiredkeys="name"//At least 1 property of the list item>{item=><likey={item.id()}><item.Imageid="pic"width="50"/><item.Textid="name"/></li>}</content.List>
Allows editing a section of content, (like the properties of an object).
This editor is useful for:
- Off-page content such as metadata
- The content of complex page elements such as dropdowns, modals and popovers
- Editing many properties at once
<content.Objectid="meta"keys="title,description"// Required; will define with items can be editedtype="span"// Defaults to `div` // Other standard props (className, style etc.) can be passed too/>