Easily add comments to your headless WordPress with react-wordpress-comments component.
This project is not supported anymore, but feel free to check it out in case you're interested.
react-wordpress-comments uses native WordPress REST API, so you don't need any additional configuration in most cases.
Using is as simple as this:
<WpComments
maxDepth={3}
pageId={619}
hostUrl="https://your-wp-site.com"
allowComments={true}
user={john}
/>It's an alpha version. See ongoing development section for more information.
- Native WordPress API. No need to use any plugins for WordPress, component uses WP's built-in REST API.
- Lazy loading. Fetches comments after the component is mounted to the DOM.
- Tree structure. Shows comments in hierarchical tree with custom depth.
- Submit comments. Users can submit comments, including responses to other comments. You may need to enable anonymous comments via REST API if you want users to comment without authorization. This component does not have a basic auth functionality, but you can provide user data with JWT.
- Validation before submit. Submit form uses native HTML validation to check fields.
- Authentication. If your frontend uses JWT to authorize users, you can pass this user data for comment posting.
-
A WordPress website with public REST API.
-
react 16.8 or higher as a peer dependency.
- Install package in your repository with a React app:
npm install react-wordpress-comments- Import it along with React and use it:
import React from "react"
import WpComments from "react-wordpress-comments"
import "react-wordpress-comments/css/styles.css"
function MyComponent() {
return (
<div>
<h1>This is my page's title</h1>
<p>Here goes the main content of the page</p>
<WpComments
maxDepth={3} // provide depth that you want comments to be nested in a list
pageId={619} // id of a page you want to fetch comments from and post to
hostUrl="https://wordpress.example.com" // url of your WordPress website
allowComments={true} // can users post comments?
user={user} // provide user if authorized, default is null. See below
/>
</div>
)
}
render(<MyComponent />, document.querySelector("#root"))To override default strings pass an object to translationOverrides prop of the Component.
Object structure is like this:
type Translations = {
mainHeading?: string
leaveCommentHeading?: string
loadingCommentsLabel?: string
respondLinkLabel?: string
loggedInUserIntro?: string
nameInputLabel?: string
emailInputLabel?: string
commentInputLabel?: string
commentInputPlaceholder?: string
submitButtonLabel?: string
cancelLinkLabel?: string
commentsClosedNotice?: string
}user prop is an object that should look like this:
let user = {
name: "Maria",
email: "[email protected]",
jwt: "jwt-string-value",
}name and email properties are required.
If you authenticate users in your React app, you're probably providing user info via Context API.
If that is the case, you can construct an object with user name, email, and JWT string to pass down to comments section. The component will automatically send Authorization header with Bearer: "jwt-string-value" when posting the comment.
Note that by default WordPress does not support JWT. You will need a plugin for that.
The component will load only 100 comments from an API. Pagination is a feature that is yet to come.
By default there are two ways to submit comments — either anonymously, or authenticated-only. In order to have some sort of combined logic (anonymous or authorized for those who can be authorized) you need to implement it in WordPress.
To allow anonymous posting of comments via REST API you need to add a code snippet to your WordPress. Read more here on Stackoverflow.
When we use decoupled architecture, the requests are cross-origin.
WP REST API allows CORS by default. However, your server configuration might be set differently, and it would prevent comments from being posted and/or fetched. If you receive CORS errors, you may need to manually add headers that allow all origins, or use a plugin. For more security, allow only one origin where your front end lives. However, allowing origin in headers is not the only thing that may prevent your browser to make a CORS request, you may need to configure your server or browser.
By default comments are fetched from {your-wp-host}/wp-json/wp/v2/comments endpoint.
If you're using non-pretty permalinks, your REST API endpoint URL may be different from standard, in this case the component won't work. As of now the only way to change it is to change the source code of the component.
Simply copy the content from src/ folder of this repo and drop it into your React app's src/components/wpComments folder (or whatever structure you use). Then simply import it like you would any other component you've written. Don't forget to grab /css/styles.css file too if you need it.
The package has a styles.css file that provides some basic styles and a loader spinner. If you import it along with the component like this:
import "react-wordpress-comments/css/styles.css"It uses very minimal styling, most of its look will be inherited so that the comments match overall style of your page. You can override styles by using more specific selectors. (See demo app for example.)
Otherwise use your own stylesheet without importing component's styles at all.
Upgrades, features and bugfixes to come:
- Error boundaries and better error handling. At this point the component may crash your app if there is an error
☹️ - Tests and CI automation
- Links processing. If you don't specify your frontend host in WordPress, the links within comments will point to your backend host.
- Pagination
If you have a feedback or suggestion, just file an issue. Anything is welcome.
To contribute to code, see contributing guide. But really, if you want to contribute, just do it :)
Licensed under the MIT License.