React components for use within different Yoast React projects.
You can install yoast-components using npm:
npm install yoast-components
import Input from 'yoast-components/forms/Input'
// Then you can use the Input component within your React components
Components that are translated using react-intl
require that you wrap your application in react-intl
's IntlProvider
.
See the documentation for more information.
If you use yoast-components
within your own project we recommend using webpack
with the following loaders and configuration:
- Babel-loader
- Presets: es2015 and react
Webpack 2+ configuration:
module.exports = {
// ...
module: {
rules: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
use: [ {
loader: "babel-loader",
} ],
},
// ...
],
},
// ...
}
.babelrc
:
{
"presets": ["es2015", "react"]
}
In the entry
of your webpack you should include babel-polyfill as the very first element:
module.exports = {
// ...
entry: [
"babel-polyfill",
// ...
"your-app-entry.js"
]
// ...
}
Some components require implementing a reducer. See which components need what reducers below:
If you wish to use the content analysis component you should implement the contentAnalysisReducer
, located in yoast-components/composites/Plugin/ContentAnalysis/reducers/contentAnalysisReducer.js
. In your root reducer this reducer should have the name contentAnalysis
.
import contentAnalysis from "yoast-components/composites/Plugin/ContentAnalysis/reducers/contentAnalysisReducer.js";
// Your root reducer
combineReducers( {
// ...
contentAnalysis: contentAnalysis,
// ...
} );
- Run a
yarn install
in the root folder. - Run
yarn start
in the root folder. - Go to
http://localhost:3333
yarn test
To test the code style:
grunt check
Every component should have its own folder named lowercase with the relevant files inside of it. Every component must contain a JavaScript with the component definition in it and exported using export default [Component]
. Any component can contain a SCSS file for relevant CSS and a README.md explaining how the component works.
We use i18n-calypso to localize all components. Refer to their documentation about how to use translate
, moment
and numberFormat
. We don't use the mixin provided. Only use the higher order component to wrap components when they are exported, like so:
import { localize } from 'i18n-calypso'
export default localize( Component );
If you discover any security related issues, please email security [at] yoast.com instead of using the issue tracker.
We follow the GPL. Please see License file for more information.
1. With some minor tweaks this can also be used to develop yoast-components within other projects
If you would like to develop yoast-components
within the wordpress-seo
plugin, you can do this quite easily using yarn
.
- Link your
yoast-components
project towordpress-seo
using the command line:- In your
yoast-components
project runyarn link
. - In your
wordpress-seo
project runyarn link "yoast-components"
.
- In your
Now you can make development easier by having grunt
watch your files:
- In
wordpress-seo
openGruntfile.js
. - Within the configuration object
project
, add the following line topaths>files>js[]
:node_modules/yoast-components/**/*.js
- Run
grunt watch