Unable to use Splitting in React JS

[ghost]

for some reason the code just doesn't execute, no warnings no errors, it just doesn't run I have tried both the CDN and NPM methods, both fail. What is the problem here?

To recreate my scenario, just create a react project using npx create-react-app and then try adding splitting js either through NPM or CDN

[lukethacoder]

Not too sure what you've attempted but the below worked for me using NPM.

import React, { useState, useRef, useEffect } from 'react'

import 'splitting/dist/splitting.css'
import 'splitting/dist/splitting-cells.css'
import Splitting from 'splitting'


export const SplittingJS = () => {
  const [lines, setLines] = useState([])
  const splitRef = useRef(null)

  useEffect(() => {
    if (splitRef) {
      let split_res = Splitting({
        by: 'lines',
      })
      setLines(split_res[0].lines)
      console.log(`Split text into ${lines} lines`)
    }
  }, [splitRef])

  return (
    <p
      ref={splitRef}
      data-splitting='true'
    >
      split some text here
    </p>
  )
}

[Reyyah09]

Kindly explain this part of your code: const [lines, setLines] = useState([]) const splitRef = useRef(null)

useEffect(() => { if (splitRef) { let split_res = Splitting({ by: 'lines', }) setLines(split_res[0].lines) console.log(Split text into ${lines} lines) } }, [splitRef])

[lukethacoder]

@Reyyah09 I should have commented my code better, my bad.

import React, { useState, useRef, useEffect } from 'react'

import 'splitting/dist/splitting.css'
import 'splitting/dist/splitting-cells.css'
import Splitting from 'splitting'


export const SplittingJS = () => {
  // state for the array of lines found after running Splitting
  const [lines, setLines] = useState([])
  // create a ref object to our text to split
  const splitRef = useRef(null)

  // should fire anytime splitRef is changed (onload splitRef won't exist)
  useEffect(() => {
    // double checking we actually have a reference (and the value is not null)
    if (splitRef) {
      // run the SplittingJS magic here, using 'lines' as the splitting technique
      let split_res = Splitting({
        by: 'lines',
      })
      // finding the first block of text and its lines - then assigning it to our state defined above
      setLines(split_res[0].lines)
      console.log(`Split text into ${lines} lines`)
    }
  }, [splitRef])

  return (
    <p
      ref={splitRef}
      data-splitting='true'
    >
      split some text here
    </p>
  )
}

[ghost]

@lukethacoder I think this method will work, I haven't tried this yet

[jackdewhurst]

@lukethacoder this was very helpful thank you!

[jackdewhurst]

@lukethacoder do you know how to re-split if I were to change the text split some text here programmatically, say via a timeout?

[lukethacoder]

@jackdewhurst suppose something like this could work (havnt tested this - but makes sense in my head)

import React, { useState, useRef, useEffect } from 'react'

import 'splitting/dist/splitting.css'
import 'splitting/dist/splitting-cells.css'
import Splitting from 'splitting'

export const SplittingJS = () => {
  // state for the array of lines found after running Splitting
  const [lines, setLines] = useState([])
  // create a ref object to our text to split
  const splitRef = useRef(null)

  // should fire anytime splitRef is changed (onload splitRef won't exist)
  useEffect(() => {
    splitTheWords()
  }, [splitRef])

  const splitTheWords = () => {
    // double checking we actually have a reference (and the value is not null)
    if (splitRef) {
      // run the SplittingJS magic here, using 'lines' as the splitting technique
      let split_res = Splitting({
        by: 'lines',
      })
      // finding the first block of text and its lines - then assigning it to our state defined above
      setLines(split_res[0].lines)
      console.log(`Split text into ${lines} lines`)
    }
  }

  const testFireOffSplit = () => {
    // this could be run via setTimeout instead
    splitTheWords()
  }

  return (
    <>
      <p ref={splitRef} data-splitting='true'>
        split some text here
      </p>
      <button onClick={testFireOffSplit}>re-split</button>
    </>
  )
}

or could run it from another useEffect that is watching another value change too.