@mreach/mr-cms-yoast

MR CMS Yoast

Yoast SEO integration for MR CMS.

Usage

MR CMS Yoast makes it easy to add SEO Analysis by Yoast to a React app. It processes articles or pages using a web worker so we don't affect performance of the UI thread.

YoastAnalyzer is is the main component made available by this library. Render this component and it will analyze the data passed in and return the Yoast results via a callback:

import { YoastAnalyzer } from 'mr-cms-yoast'

export class Example extends Component {
  render () {
    return (
      <YoastAnalyzer
        body={this.state.body}
        description={this.state.description}
        keyword={this.state.keyword}
        title={this.state.title}
        url={this.state.url}
        onAnalyzeStart={this.onAnalyzeStart}
        onAnalyzeProgress={this.onAnalyzeProgress}
        onAnalyzeComplete={this.onAnalyzeComplete}
      />
    )
  }

  onAnalyzeStart = () => {
    this.setState({
      loading: true
    })
  }

  onAnalyzeProgress = ({progress, message}) => {
    console.log(progress, message)
  }

  onAnalyzeComplete = ({ contentAssessments, SEOAssessments }) => {
    this.setState({
      loading: false,
      contentAssessments,
      SEOAssessments
    })
  }
}

AssessmentDisplay is a helper component made available by this library to assist rendering the Yoast results:

<AssessmentDisplay name='Content' assessments={this.state.contentAssessments} />
<AssessmentDisplay name='SEO' assessments={this.state.SEOAssessments} />