Sanity Schema - Shuffled Text - Part 5 Gatsby Integration

ShuffleText.js

/** @jsx jsx */
import { jsx } from "theme-ui"
import React, { useState } from 'react'
import TextScramble from './textShuffleMaster'

function ShuffleText (props) {
  const Style = props.textSection[0].textStyle ? props.textSection[0].textStyle: 'span'
  const ShuffleText = props.textSection && props.textSection[0].phrase
  const [pause] = useState(false)  
  return (
      <Style>
        {ShuffleText ? ShuffleText.map(section => (
          <>
            {section.string ? section.string :
            <section.textStyle  key={section.key} >
            <TextScramble
            texts={section.text}
            letterSpeed={5}
            nextLetterSpeed={100}
            pauseTime={3000}
            paused={pause}
          />
          </section.textStyle> }
          </>
        )): null}
      </Style>
  )
}

export default ShuffleText