@frappy/react-content
v1.2.0
Published
React Components for Content Management and Data Handler
Downloads
3
Readme
React Content
Content Management, Display Components and API Handlers
Usage
You need to provide the model for your various types of content as configuration to the component. References are used to associate content with IDs for other domain objects that you want to assign stuff to:
import React from "react"
import { ContentManager } from "@frappy/react-content"
const SomeComponent = props => (
<ContentManager
references={["demo1", "demo2"]}
contentTypes={{
description: {
list: false,
fields: ["title", "description"],
},
team: {
list: true,
fields: ["name", "role"],
},
papers: {
list: true,
fields: ["title", "authors", "publication", "year"],
},
}}
/>
)
API Endpoints
The following assumes the default prefix /api/content
. URL parameter are prefixed with :
- GET
/api/content
- retrieves a list of all content objects - GET
/api/content/:contentId
- retrieves a specific content object
Content Management Endpoints
- POST
/api/content
- creates a new content object withlabel
,contentType
,references
andcontent
in the body - POST
/api/content/:contentId
- updates content object withlabel
,references
andcontent
in the body - DELETE
/api/content/:contentId
- deletes a content object
Content Handler
The package also provides an API handler class that allows to easily query content objects from the database:
import { ContentHandler } from "@frappy/react-content"
const handler = new ContentHandler() // pass an optional argument, if you use a different API prefix on the backend
// get all
handler.getContentList().then(allContent => {
// allContent is an array of all content objects
})
// filter by reference
handler.getContentList("demo1").then(demo1Content => {
// demo1Content is only content assigned to reference "demo1"
})
// filter by reference and content type
handler.getContentList("demo1", "team").then(demo1TeamContent => {
// list of content of type "team" and associated to "demo1" (reference)
})
// just filter by content type
handler.getContentList(null, "team").then(teamContent => {
// gives a list of "team" content types
})