How to pass parameters (data) from plugin PHP to React

Question

I am experimenting creating a WordPress plugin using create-react-app. To make things simple, I am trying to develop a click-to-tweet plugin.

The shortcode part (in PHP ) looks like:

// Shortcode to output needed markup
add_shortcode( 'react_click_to_tweet', 'react_click_to_tweet_test' );
function react_click_to_tweet_test($atts = [], $content = null, $tag = '') {
    return '<div id="root" data=' . $content . '></div>';
}

function include_react_files() {
  wp_enqueue_style( 'prefix-style', plugins_url('css/main.ae114d0c.css', __FILE__) );

  // add the JS file to the footer - true as the last parameter
  wp_enqueue_script( 'plugin-scripts', plugins_url('js/main.d8745ba2.js', __FILE__),array(),  '0.0.1', true );
}

add_action( 'wp_enqueue_scripts', 'include_react_files' );

$content should be the text to tweet that I want to pass with the shortcode as:

[react_click_to_tweet]TEXT TO TWEET[/react_click_to_tweet]

The index.js has:

ReactDOM.render(<App />, document.getElementById('root'));
registerServiceWorker();

But this isn't working. Any suggestions?

Furthermore, how aI can pass $atts to pass for example attributes to modify the CSS at runtime?

[edit] Based on the suggestions @Paul Burilichev and @belinus I have done the following changes:

I tried what they have about WP AJAX for shortcodes with parameters. I tried:

add_shortcode( 'react_click_to_tweet', 'react_click_to_tweet_test' ); 
function react_click_to_tweet_test($atts = [], $content = null, $tag = '') {
  $o = ''; 
  $o .= '<div id="tweet" >'; 
  if (!is_null($content)) {
    $o .= apply_filters('content', $content);
    // run shortcode parser recursively
    $o .= do_shortcode($content);
  }
  // end box
  $o .= '</div>'; 
  return $o; //'<div id="root" ></div>';
} 

but, it doesn't work. What am I missing?

Then, I tried:

function include_react_files() {
  wp_enqueue_style( 'prefix-style', plugins_url('css/main.ae114d0c.css', __FILE__) );

  // add the JS file to the footer - true as the last parameter
  wp_register_script( 'plugin-scripts', plugins_url('js/main.d8745ba2.js',  __FILE__),array(),  '0.0.1', true );
  $data = array( 
    'text' => $content, // I also tried passing a string 'some content goes here'
    'key2' =? 'value2',
  );
  wp_localize_script( 'plugin-scripts', 'wp_object', $data );
  wp_enqueue_script( 'plugin-scripts' );
}

add_action( 'wp_enqueue_scripts', 'include_react_files' );

but object is not recognized on my App component. I guess I am still missing something here. my index.js looks like:

import React from 'react'; 
import ReactDOM from 'react-dom'; 
import App from './App'; 
import registerServiceWorker from './registerServiceWorker'; 
import './index.css'; 

//const data = "This is some cool stuff"; 
ReactDOM.render( 
  <App />, document.getElementById('root')); 
registerServiceWorker();

And this is my App.js:

import React, { Component } from 'react';
import './App.css';

class App extends Component {
  render() {
    const page = window.location.href;
    let data = page+'&text='+ wp_object.text;
    let twiiterUrl = "https://"+"twitter.com/intent/tweet?url=";
    let URL = twiiterUrl+data;

     //console.log(wp_object.text);
     return (
      <div className="App">
        <div className="tm-click-to-tweet">
            <div className="tm-ctt-text">
                <a href={URL} target="_blank">{wp_object.text} </a>
            </div>
            <a href={URL} className="tm-ctt-btn" target="_blank">Click To Tweet</a>
            <div className="tm-ctt-tip"></div>
            <div className="clear"></div>
        </div>
      </div>
    );
  }
}

export default App;

It doesn't recognize wp_object;

Answer 1

WordPress has a function, wp_localize_script() that can do this. You create an array of values that you want to access in your JavaScript file and then inject it as an object.

You would modify your enqueue function like this:

function include_react_files() {
  wp_enqueue_style( 'prefix-style', plugins_url('css/main.ae114d0c.css', __FILE__) );

  // add the JS file to the footer - true as the last parameter
  wp_register_script( 'plugin-scripts', plugins_url('js/main.d8745ba2.js', __FILE__),array(),  '0.0.1', true );
  $data = array( 
     'key1' => 'value1',
     'key2' =? 'value2',
  );
  wp_localize_script( 'plugin-scripts', 'object', $data );
  wp_enqueue_script( 'plugin-scripts' );
}

add_action( 'wp_enqueue_scripts', 'include_react_files' );

Then to access this data, you would simply do object.key1, object.key2, etc. So console.log( object.key1 ); will echo value1.

Answer 2

Maybe it's later but... You have to access the window object in order to access global variables.

So the example code would be:

<a href={URL} target="_blank">{window.wp_object.text} </a>

For reference: https://facebook.github.io/create-react-app/docs/using-global-variables

Answer 3

I warn that the next method is going to brake WP coding notation and style, but for the test purposes and a quick start you can include wanted parameters directly to the template files which is placed on a template directory, you know.

Another approach is using of WP AJAX. The last my project was created by this approach. I'm sure, you know what I am about. More information about WP AJAX. But here be careful to investigate about availability Ajax request to you unauthorized visitors (not logged in admin!) which includes by a specific hook start wp_ajax_nopriv_.

Don't hesitate - ask questions.

Answer 4

I struggled with this for awhile. The best solution I could come up with was to create a JSON file in within my create-react-app then have wordpress write to it. I hope this helps someone.

I run this on plugin activation

function json_config_file() {

        $file = plugin_dir_path( __DIR__ ).'PATH_TO_REACT_SRC_FOLDER/wordpress.json';

        $json = array(
            key=> value
        );

        $fp = fopen($file, 'w');
        fwrite($fp, json_encode($json));
        fclose($fp);
    }

Then in my app.js I can call

let wordpress = require('./wordpress.json');

and call the values with

console.log(wordpress.value)