React Hooks - Prism

00 - prism.md

React Hooks make including Prism easy.

I've been learning react hooks recently. I love that you can refactor components now and remove a lot of logic that made components giant, and reuse the same logic another components

The example before extrapolates all that behavior of running Prism inside any component.

You can see how I use this for my blog posts on github

01 - ExampleWithMarkdown.jsx

import React from 'react'
import ReactMarkdown from 'react-markdown'
import { usePrism } from './Prism';

function Markdown(props) {
  const ref = usePrism();

  return (
    <div ref={ref}>
      <ReactMarkdown 
        {...props}
      />
    </div>
  )
}

export default Markdown

Prism.js

import Prism from 'prismjs'
import { useRef, useEffect } from 'react'

function _renderNodeList(func, ref) {
  const nodeList =  ref.querySelectorAll('pre')
  for (let i = 0; i < nodeList.length; i++) {
    const element = nodeList[i];
    func(element)
  }
}

function _addAttributes(attribute, ref) {
  _renderNodeList((element) => {
    element.setAttribute(...attribute)
  }, ref)
}

function _addClasses(className, ref) {
  _renderNodeList((element) => {
    element.classList.add(className)
  }, ref)
}

export function usePrism(options) {
  const ref = useRef();

  useEffect(() => {
    withPrism(ref, ...options)
  })
}

export function withPrism(
  { current: ref },
  plugins = [],
  addHooks = () => {},
) {
  addHooks(Prism);
  plugins.map(({ func, className, dataAttribute }) => {
    if (className) {
      _addClasses(className, ref);
    }
    if (dataAttribute) {
      _addAttributes(dataAttribute, ref);
    }
    return func(Prism)
  });

  Prism.highlightAll()
}