yoast-components v5.24.1
Yoast components
React components for use within different Yoast React projects.
Installation
You can install yoast-components using npm:
npm install yoast-components
Usage
import Input from 'yoast-components/forms/Input'
// Then you can use the Input component within your React components
Requirements
Webpack
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
Example
Webpack 2+ configuration:
module.exports = {
// ...
module: {
rules: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
use: [ {
loader: "babel-loader",
} ],
},
// ...
],
},
// ...
}
.babelrc
:
{
"presets": ["es2015", "react"]
}
Additional configuration
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"
]
// ...
}
Reducers and Middleware
Some components require implementing a reducer. See which components need what reducers below:
Content analysis
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,
// ...
} );
Setup
- Run a
yarn install
in the root folder. - Run
yarn start
in the root folder. - Go to
http://localhost:3333
Testing
yarn test
Code style
To test the code style:
grunt check
Contributing
Folder structure
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.
Translation
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 );
Security
If you discover any security related issues, please email security at yoast.com instead of using the issue tracker.
Credits
License
We follow the GPL. Please see License file for more information.
Developing within wordpress-seo
1
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:
1. In wordpress-seo
open Gruntfile.js
.
2. Within the configuration object project
, add the following line to paths>files>js[]
:
node_modules/yoast-components/**/*.js
3. Run grunt watch
1 year ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
8 years ago
8 years ago
8 years ago