garethsmalljs-blog

[garethsmalljs-blog]

Client Side Rendering Hell with React.js, Drupal 8, Chart.js, & react-chart.js

Unfortunately for my bank account, yesterday, I parted ways with my dead end job of the past; the impact of this scenario may not have fully hit me yet. The realization of “Oh Fuck, how will I survive without a steady income?”. Blah Blah, that is in the past now. Let’s focus on today and the future. So what’s so important about today? Well I guess many things, but more importantly in my world today I’ve begun my new journey. I’ve entered into a masochistic process of learning to write client-side rendering React for a Drupal 8 Commerce Conference module that I am working on. As much as I am enjoying this client-side-rendering hell, I’ve also decided to go a step further and add Chart.js into the mix. If this blog is to help you with anything, it will help you understand how to use your Chart.js components with React when client-side rendering.

Why would you need help using Chart.js with React? There is a react-chart.js that contains React components for Chart.js. This is a great discovery right? Well not so quickly, I’ve also discovered and decided that most people use the older method of server-side rendering for React. This isn’t a bad thing, but for somebody learning to render React on the client-side it leaves a bad taste in the mouth.

Let’s get to the code.

Generally for somebody writing server-side rendering React importing components is a generally easy process and there are many examples out there to support this.

To access Chart.js components on React with react-chart.js the example code looks like this:

var LineChart = require("react-chartjs").Line; var MyComponent = React.createClass({  render: function() {    return <LineChart data={chartData} options={chartOptions} width="600" height="250"/>  } });

Example from https://github.com/reactjs/react-chartjs

This example works fine if you are rendering React on the server-side, but why not on the client-side? The require function on the the first line which is a part of Common.js is importing the required library. Unfortunately, for somebody rendering React on the client-side, this is not supported in Common.js. To supplement this you must include the script in your HTML and then define a variable with the components name.

An example of this from my Drupal 8 Commerce Conferences module:

let Line = window['react-chartjs'].Line;

var MyComponent = React.createClass({

 render: function() {    return <Line style={{width: '100%', height:'300px'}} data={chartData}/>  } });

If you notice on line 1 I am declaring the Line component, which is will allow us the achieve the same solution as required on the server side. This isn’t a pretty solution, but it was necessary to achieve my end goal. Since react-chartjs is not a valid variable name in JavaScript, I was required to call it as an index of window.

It seems for now this is what I have found to be required for client-side rendering react. The format of this solution is not always require. For example, I found with the ReactBootstrap library you can declare a bootstrap button component like this:

let Button = ReactBootstrap.Button;

If the variable is in the window scope and has a valid variable name you won’t have to call it as an index of window. If you’re having a hard time finding the name of the variable for the react library, you may want to output the variables in the window scope using something like this:

for(var name in window) console.log(name);

I hope this helps out anybody muddling through client-side hell with react. If you have a better solution please let me know, and I will gladly test it out. For now, the muddling continues as my journey commences. I will keep you informed of my adventures as they may progress.

Drupal 8 Commerce Conference project