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

by

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;

4 Answers
4

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.

Leave a Comment