/shared-ui-react

React components for Shared UI library

Primary LanguageJavaScriptGNU General Public License v3.0GPL-3.0

npm version License: GPLv3 GitHub issues GitHub pull requests

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 npm version
Box npm version
Modal npm version
Component Version
Button npm version
Button Icon npm version
Dropdown npm version
Input npm version
Notifications npm version
Pagination npm version
Post npm version
Progress Bar npm version

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