open-index/open-npm huggingface dataset:
npm package: @mreach/mr-cms-yoast
Description: Yoast SEO integration for MR CMS
Author: MarketReach, Inc.
Latest version: 0.1.1

[![MarketReach Logo](https://art.mr-file-serve.com/Clients/MarketReach/Assets/Logos/MR_LOGO_RGB_COLOR_SMALL.png)](https://mreach.com)

# 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:

```jsx
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:

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