Shared UI Components for React

This is the official implementation of WPMU DEV Shared UI components for React.

Components

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

Getting Started

React Plugins

Go to the component you need, install it using node and start using it on your project.

Non-React Plugins

1. Install Packages.

Install dependencies for your project:

npm i react react-dom @babel/core @babel/preset-react --save-dev

2. Babel settings.

Create or edit .babelrc file and include the following:

{
  "presets": [
    "@babel/preset-env",
    "@babel/preset-react"
  ]
}

3. Webpack settings.

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 ];

4. Import your component(s).

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' )
);

5. HTML Content.

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