Pantheon Content Publisher React SDK
npm install @pantheon-systems/pcc-react-sdk
A simple and easy to use React client for the Pantheon Content Publisher API
``console`
npm install @pantheon-systems/pcc-react-sdk
`javascript
import {
PantheonClient,
PantheonProvider,
} from "@pantheon-systems/pcc-react-sdk";
// Create a client
const pantheonClient = new PantheonClient();
// Wrap your app in the provider
function App() {
return (
// Pass the client to the provider
);
}
`
We provide a set of helpers in the form of API helpers, React hooks and React
helper components to get you up and running with the Pantheon Content Publisher
API.
#### Article Renderer
The component will render the article received from
Content Publisher by converting the raw article data into React elements you can
style and render in your app.
`javascript
import { ArticleRenderer } from "@pantheon-systems/pcc-react-sdk";
function ArticlePage({ id }) {
const { article } = useArticle(id);
return (
{
// Render the article
article &&
}
);
}
`
#### useArticle
Fetch an article by ID.
`javascript
import { useArticle } from "@pantheon-systems/pcc-react-sdk";
function Article({ id }) {
const { article, loading, error } = useArticle(id);
if (loading) {
return
if (error) {
return
return (
#### useArticles
Fetch a list of available articles.
javascript
import { useArticles } from "@pantheon-systems/pcc-react-sdk";function Articles() {
const { articles, loading, error } = useArticles();
if (loading) {
return
Loading...;
} if (error) {
return
Error: {error.message};
} return (
{articles.map((article) => (
/articles/${article.id}}>{article.title}
))}
);
}
`$3
These helpers are used to fetch data from the Pantheon Content Publisher API
outside of the React component lifecycle.
They are useful for fetching data in server-side rendered applications or in
other contexts where React hooks cannot be used.
#### getArticle
Fetch an article by ID.
javascript
import { getArticle } from "@pantheon-systems/pcc-react-sdk";// In Next.js getServerSideProps for example
export async function getServerSideProps({ params }) {
const article = await getArticle(
pantheonClient, // The PantheonClient instance initialized in Setup
params.id,
);
return {
props: {
article,
},
};
}
`#### getArticles
Fetch a list of available articles, excluding their content.
javascript
import { getArticles } from "@pantheon-systems/pcc-react-sdk";// In Next.js getStaticPaths for example
export async function getStaticPaths() {
const articles = await getArticles(pantheonClient); // The PantheonClient instance initialized in Setup
const paths = articles.map((article) => ({
params: { slug: article.id },
}));
return {
paths,
fallback: true,
};
}
`#### Creating your own smart components
Create the smart component
javascript
import { forwardRef } from "react";
import { useBaseSmartComponent } from "./hooks/useBaseSmartComponent";const MyAwesomeComponent = forwardRef(function ({ title, body }, ref) {
useBaseSmartComponent();
return
{title}
{body}
;
`Provide it to the PantheonAPI's smart component map. (Note that other properties
should be passed in too, such as getPantheonClient and resolvePath). See the
NextJS starter kit for a clearer reference.
javascript
PantheonAPI({
smartComponentMap: {
AWESOME_COMPONENT: {
reactComponent: MyAwesomeComponent,
title: "My Awesome Component",
iconUrl: null,
fields: {
title: {
required: true,
type: "string",
},
body: {
required: false,
type: "string",
},
},
},
},
});
``