https://github.com/knowler/react-router-wordpress-admin-plugin-demo
A React Router in WordPress admin proof of concept plugin
https://github.com/knowler/react-router-wordpress-admin-plugin-demo
Last synced: 10 months ago
JSON representation
A React Router in WordPress admin proof of concept plugin
- Host: GitHub
- URL: https://github.com/knowler/react-router-wordpress-admin-plugin-demo
- Owner: knowler
- Created: 2020-01-21T08:36:23.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2020-01-21T08:46:23.000Z (over 6 years ago)
- Last Synced: 2025-05-07T00:47:44.085Z (about 1 year ago)
- Language: JavaScript
- Homepage:
- Size: 112 KB
- Stars: 13
- Watchers: 0
- Forks: 2
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# React Router in a WordPress Admin Plugin
Using a pattern like this for a plugin means that there is no
page refresh between the subpages of your WordPress admin
plugin.
The key is [React Portals](http://reactjs.org/docs/portals.html).
We can “take over” the WordPress admin menu for our plugin using
them and render our own “imposter” menu that is controlled by
[React Router](https://reacttraining.com/react-router/web/).
## Try it out
```shell
# Go to the plugins directory
$ cd wp-content/plugins
# Clone this repo
$ git clone https://github.com/knowler/react-router-wordpress-admin-plugin-demo.git
# Go to the plugin
$ cd react-router-wordpress-admin-plugin-demo
# Install Composer dependencies
$ composer install
# Install Node dependencies
$ yarn
# Build plugin assets
$ yarn build
# Activate the plugin
$ wp plugin activate react-router-wordpress-admin-plugin-demo
# Go to WordPress admin to see for yourself
```
## Optimizations
This is intended to a proof of concept. I’m know optimizations
could be made, but that wasn’t important for this demo.