This is the official implementation of WPMU DEV Shared UI components for React.
The following is a list of the components that are ready to be used with corresponding links to NPM package and the showcase design spec.
| Container | Version |
|---|---|
| Accordion |  |
| Box |  |
| Modal |  |
| Component | Version |
|---|---|
| Button |  |
| Button Icon |  |
| Dropdown |  |
| Input |  |
| Notifications |  |
| Pagination |  |
| Post |  |
| Progress Bar |  |
Go to the component you need, install it using node and start using it on your project.
Install dependencies for your project:
npm i react react-dom @babel/core @babel/preset-react --save-dev
Create or edit .babelrc file and include the following:
{
"presets": [
"@babel/preset-env",
"@babel/preset-react"
]
}Create or edit webpack.config.js file:
var path = require( 'path' );
var config = {
source: {},
output: {}
};
config.source.js = './assets/js/index.js';
config.output.jsDirectory = 'assets/js/';
config.output.jsFileName = 'index.min.js';
var jsConfig = Object.assign( {}, {
entry: config.source.js,
module: {
rules: [{
test: /\.(js|jsx)$/,
exclude: /(node_modules|dist)/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/env']
}
}
}]
},
resolve: {
extensions: ['*', '.js', '.jsx'],
},
output: {
filename: config.output.jsFileName,
path: path.resolve( __dirname, config.output.jsDirectory )
},
devServer: {
contentBase: path.resolve( __dirname, '.' )
},
});
module.exports = [ jsConfig ];Create a new file, preferrably inside /assets/js/ folder, and its name should match the file we are calling from webpack:
import React from 'react';
import ReactDOM from 'react-dom';
import {
ComponentName
} from '@wpmudev/react-component-name';
ReactDOM.render(
<ComponentName />,
document.getElementById( 'app' )
);Go to the file where you going to include your component(s), for example: dashboard.php file, and add:
<div id="app"></div>
<script src="./assets/js/index.min.js"></script><!-- Your react file must be called here -->