Using highlight.js in React&nbsp;is pretty straight forward if the content that you&#39;re rendering is just static. However, I usually find that I want to highlight dynamic HTML code that I&#39;m rendering from a CMS so I&#39;m using&nbsp;dangerouslySetInnerHTML. In that case it&#39;s not totally clear how to apply the highlighting to the inner HTML. In this article I will go over how to do that.

&nbsp;

<h1>Installation</h1>

Of course you&#39;ll need to install highlight.js:

<pre>
npm install highlight.js</pre>

or

<pre>
yarn add highlight.js</pre>

You will also need to include the CSS for highlight.js in your project somehow. I&#39;m using Next.js so I just link the CSS in a custom _document.js.

&nbsp;

<h1>Component</h1>

I created a component called Highlight to wrap this functionality. It takes one prop and that is the HTML that I&#39;m rendering.

The render method is pretty straight-forward:

<pre>
render() {
 const { content } = this.props;
 return (
 &lt;div ref={this.nodeRef} dangerouslySetInnerHTML={{ __html: content }} /&gt;
 );
}</pre>

&nbsp;

All I am doing is rendering that HTML with dangerouslySetInnerHTML and setting up a ref to the wrapping div that I&#39;m going to use later to highlight.

In the constructor I need to do the ref setup:

<pre>
constructor(props) {
 super(props);
 this.nodeRef = React.createRef();
}</pre>

Next I create a method to use that ref and actually call&nbsp;highlight.js on any nodes that I choose:

<pre>
highlight = () =&gt; {
 if (this.nodeRef) {
 const nodes = this.nodeRef.current.querySelectorAll(&#39;pre&#39;);
 nodes.forEach((node) =&gt; {
 hljs.highlightBlock(node);
 });
 }
}</pre>

In the above I am just applying highlight.js to any blocks wrapped in a &lt;pre&gt; tag, which is what I use in the CMS to indicate that this should be highlighted.

And finally we just need to call the highlight method when we&#39;re ready. All together the component looks like this:

<pre>
import React, { Component } from &#39;react&#39;;
import hljs from &#39;highlight.js/lib/highlight&#39;;
import javascript from &#39;highlight.js/lib/languages/javascript&#39;;

hljs.registerLanguage(&#39;javascript&#39;, javascript);

class Highlight extends Component {
 constructor(props) {
 super(props);
 this.nodeRef = React.createRef();
 }

 componentDidMount() {
 this.highlight();
 }

 componentDidUpdate() {
 this.highlight();
 }

 highlight = () =&gt; {
 if (this.nodeRef) {
 const nodes = this.nodeRef.current.querySelectorAll(&#39;pre&#39;);
 nodes.forEach((node) =&gt; {
 hljs.highlightBlock(node);
 });
 }
 }

 render() {
 const { content } = this.props;
 return (
 &lt;div ref={this.nodeRef} dangerouslySetInnerHTML={{ __html: content }} /&gt;
 );
&nbsp; }
}


export default Highlight;</pre>

Using highlight.js in React&nbsp;is pretty straight forward if the content that you&#39;re rendering is just static. However, I usually find that I want to highlight dynamic HTML code that I&#39;m...

Highlight.js with React

In this article I will go over using MobX with Next.js in a more practical manner than the <a href="https://github.com/zeit/next.js/tree/canary/examples/with-mobx" target="_blank">with-mobx</a> example in the Next.js repo. While the official example provides a good understanding of how to install and configure MobX, it does not do a good job of indicating how it can be practically used especially in the case of multiple stores and in a page with getInitialProps. This example will show you how to setup MobX in Next.js as well as how to hydrate the client side store with server side data.

In this article I will go over using MobX with Next.js in a more practical manner than the <a href="https://github.com/zeit/next.js/tree/canary/examples/with-mobx" target="_blank">with-mobx</a> example in the Next.js repo. While the official example provides a good understanding of how to install and configure MobX, it does not do a good job of indicating how it can be practically used especially in the case of multiple stores and in a page with getInitialProps. This example will show you how to setup MobX in Next.js as well as how to hydrate the client side store with server side data.

<h1>Installation</h1>

First, install the required packages:

<pre>
yarn add mobx mobx-react</pre>

or

<pre>
npm install --save mobx mobx-react</pre>

Then install the babel plugins:

<pre>
yarn add -D @babel/plugin-proposal-class-properties @babel/plugin-proposal-decorators</pre>

or

<pre>
npm install --save-dev @babel/plugin-proposal-class-properties @babel/plugin-proposal-decorators</pre>

&nbsp;

Next you will need to update or create a .babelrc&nbsp;file in the root directory with the following:

<pre>
{
 &quot;presets&quot;: [
 &quot;next/babel&quot;
 ],
 &quot;plugins&quot;: [
 [&quot;@babel/plugin-proposal-decorators&quot;, { &quot;legacy&quot;: true }],
 [&quot;@babel/plugin-proposal-class-properties&quot;, { &quot;loose&quot;: true }]
 ]
}</pre>

&nbsp;

<h1>Creating Stores</h1>

Now we can create some stores. I put mine&nbsp;in a folder named stores/. For this example let&#39;s make two separate stores so that you can get the basics and expand from there. The first I&#39;m calling UIStore.js and is really just used to control global UI elements. The second I&#39;m calling PostStore.js and this is used to interact with an API to get posts.

stores/UIStore.js:

<pre>
<code>
class UIStore {
 @observable searchOverlayOpen = false;

 @action setSearchOverlayOpen(value) {
 this.searchOverlayOpen = value;
 }
}

export default UIStore;</code></pre>

&nbsp;

stores/PostStore.js:

<pre>
import { observable, action } from &#39;mobx&#39;;

import { makeFetchRequest } from &#39;../utils/API&#39;;

class PostStore {
 @observable post = null;

 endpoint = &#39;post&#39;;

 constructor(initialData = {}) {
 this.post = initialData.post;
 }

 async fetch(id) {
 const response = await makeFetchRequest(`${this.endpoint}/${id}/`);
 this.setPost(response);
 }

 @action setPost(post) {
 this.post = post;
 }
}

export default PostStore;
</pre>

Now we need to setup a stores.js file in stores/ to contain these two MobX stores and initialize them. Note that in the case of UIStore, there will be no server side data to re-hydrate so it will be handled different than the PostStore which will need to be re-hyrated from the server. If we need to re-hydrate then we will have to pass in initialData from the server.

stores/stores.js:

<pre>
import { useStaticRendering } from &#39;mobx-react&#39;;

import PostStore from &#39;./PostStore&#39;;
import UIStore from &#39;./UIStore&#39;;

const isServer = typeof window === &#39;undefined&#39;;
useStaticRendering(isServer);

let store = null;

export default function initializeStore(initialData = { postStore: {} }) {
 if (isServer) {
 return {
 postStore: new PostStore(initialData.postStore),
 uiStore: new UIStore(),
 };
 }
 if (store === null) {
 store = {
 postStore: new PostStore(initialData.postStore),
 uiStore: new UIStore(),
 };
 }

 return store;
}</pre>

&nbsp;

<h1>Wiring it Up</h1>

Now we will need to initialize stores and wrap our app in a MobX Provider in our custom pages/_app.js file.

pages/_app.js:

<pre>
import React from &#39;react&#39;;
import App, { Container } from &#39;next/app&#39;;
import { Provider } from &#39;mobx-react&#39;;

import initializeStore from &#39;../stores/stores&#39;;

class CustomApp extends App {
 static async getInitialProps(appContext) {
 const mobxStore = initializeStore();
 appContext.ctx.mobxStore = mobxStore;
 const appProps = await App.getInitialProps(appContext);
 return {
 ...appProps,
 initialMobxState: mobxStore,
 };
 }

 constructor(props) {
 super(props);
 const isServer = typeof window === &#39;undefined&#39;;
 this.mobxStore = isServer ? props.initialMobxState : initializeStore(props.initialMobxState);
 }

 render() {
 const { Component, pageProps } = this.props;
 return (
 &lt;Provider {...this.mobxStore}&gt;
 &lt;Container&gt;
 &lt;Component {...pageProps} /&gt;
 &lt;/Container&gt;
 &lt;/Provider&gt;
 );
 }
}

export default CustomApp;</pre>

&nbsp;

<h1>Using It</h1>

The part that I had trouble finding an&nbsp;explanation for is how to actually use a MobX store in a pages&#39; getInitialProps function while hydrating from server data. Here is how you do that, roughly:

<pre>
import React, { Component } from &#39;react&#39;;
import { inject, observer } from &#39;mobx-react&#39;;

@inject(&#39;postStore&#39;) @observer
class Post extends Component {
 static async getInitialProps({ mobxStore, query }) {
 await mobxStore.postStore.fetch(query.id);
 return { post: mobxStore.postStore.post };
 }

 render() {
 const { post } = this.props;
 return (
 &lt;div&gt;
 &lt;h1&gt;{post.title}&lt;/h1&gt;
 &lt;/div&gt;
 );
 }
}

export default Post;
</pre>

Above I am also using next-routes and am passing in a query variable to getInitialProps with the id of the post. You can omit that if you don&#39;t require a query paramater. Basically, getInitialProps will receive mobxStore as a keyword argument. mobxStore is an object containing all of your stores that you passed in via pages/_app.js.

That should get you started but feel free to reach out if you have any issues.

In this article I will go over using MobX with Next.js in a more practical manner than the with-mobx example in the Next.js repo. While the official example provides a good understanding of how to install and configure MobX, it does not do a good job of indicating how it can be practically used especially in the case of multiple stores and in a page with getInitialProps. This example will show you how to setup MobX in Next.js as well as how to hydrate the client side store with server side data.

Mike Lewis

Skills

Backend

Frontend

Database

Infrastructure

Posts

Highlight.js with React

Next.js with MobX

Contact Me