@mreach/mr-cms-yoast

0.1.1 • Public • Published

MarketReach Logo

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} />

Readme

Keywords

none

Package Sidebar

Install

npm i @mreach/mr-cms-yoast

Weekly Downloads

0

Version

0.1.1

License

BSD-3-Clause

Unpacked Size

2.52 MB

Total Files

13

Last publish

Collaborators

  • mreach-accounts