import React, { useState, useRef, useEffect } from 'react' import 'splitting/dist/splitting.css' import 'splitting/dist/splitting-cells.css' import Splitting from 'splitting' export const SomePage = () => { const slideRef = useRef(null) useEffect(() => { // double checking we actually have a reference (and the value is not null) if (slideRef) { slideRef.current.Splitting(); } }, [slideRef]) return ( <p ref={slideRef} data-splitting='true' > split some text here </p> ) }