reat-wordpress-post

Transform your Wordpress Posts in to React components when using the Wordpress REST API

Motivation

Wordpress is the most popular CMS. With the introduction of the Wordpress REST API it became possible to use Wordpress in headless mode. A common use case is running Wordpress on the backend and using React (or some of the React implementations like Gatsby Js or Next.js) at the front end.

You can easilly fetch the Wordpress Post content from the /posts endpoint and feed it to React on the client. But there is one problem. Wordpress will send the post HTML as a string. To work around that in your component you need to do something like:

import React from 'react'

const postContent = "<div>Some awosome article ....</div>"

const ArticleComponent = () => <div dangerouslySetInnerHTML={() => { __html: postContent }} />

export default ArticleComponent

This is not ideal, not only because we are using dangerouslySetInnerHTML but also because we will "polute" our page HTML with all Wordpress specific classes and id's that we most probably dont plan to use.

React Wordpress Post is a way to work around that, making it possible to do:

import React from 'react'

import reactWordpressPost from 'react-wordpress-post'

const postContent = "<div>Some awosome article ....</div>"

const ArticleComponent = () => <div>{reactWordpressPost(postContent)}</div>

export default ArticleComponent

React Wordpress Post will produce a default react component for each of the blocks produced by the Gutenberg editor.

Installing

Add the module to your dependencies using yarn

npm install react-wordpress-post --save

yarn add react-wordpress-post

Using

React Wordpress Component can be used straight in to your React project without any additional setup.

import React from 'react'

import reactWordpressPost from 'react-wordpress-post'

// We are assuming you've already fetched the raw HTM for the post
const postContent = "<div>Some awosome article ....</div>"

const ArticleComponent = () => <div>{reactWordpressPost(postContent)}</div>

export default ArticleComponent

Options

React Wordpress Post accepts an options object as a second argument. This is a way to tap in to tap in to the generated components and pass props, override the default type or edit the children components. You have access to all the default component generated by React Wordpress Post, for a full list of supported components checkout Supported Blocks.

import React from 'react'

import reactWordpressPost from 'react-wordpress-post'

// We are assuming you've already fetched the raw HTM for the post
const postContent = "<div>Some awosome article ....</div>"

const ArticleComponent = () => <div>{reactWordpressPost(postContent, {
  // style the paragraph content
  p: {
    props: {
      style: {
        fontWeight: 'bold'
      }
    }
  }
})}</div>

export default ArticleComponent

For each component you can pass the following options:

type Override the default type of the components. You can use either some of the build in React types or your own component. Checkout the recipes for more info.

props: Object : This is a way to pass in props to the generated components. Usefully for passing styles, adding class names or override the default props.

children: callback A callback function to override the default children. The callback function accepts a node argument which will give access to the HTML node and all it's children's. Checkout the recipes section for more info.