- Notifications
You must be signed in to change notification settings - Fork1
Components for integrating the Wurd CMS in a React app
License
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/>
About
Components for integrating the Wurd CMS in a React app
Topics
Resources
License
Uh oh!
There was an error while loading.Please reload this page.
Stars
Watchers
Forks
Releases
Packages0
Uh oh!
There was an error while loading.Please reload this page.
Contributors2
Uh oh!
There was an error while loading.Please reload this page.