Splitting() in React's componentDidMount not working

[Eric Johnson]

Hi, thank you guys for this great library! I'm trying to use it in a React/GastbyJS project with this code:

class WorkIveDonePage extends React.Component {
    componentDidMount() {
        Splitting();
    }

    render() {
        return (
            <div>
                <section className="work__banner">
                    <div className="work__page-width">
                        <h1 className="site__banner-heading" data-splitting>

and I get the following error:

Does this look like a bug or something on my side?

[B1t]

React is translating data-splitting to data-splitting=“true”. If you set it to chars or an empty string it should work properly. We are looking at making the error reporting better for this.

[B1t]

Also we are tracking the error reporting in this issue: #27

[Shaw]

Yes, it's an issue with React's treatment of properties and how we're detecting the split to use. I would recommend a bit more specific targeting of the element to be split, perhaps using React's Refs and Splitting({ target: this.myRef }) to prevent splits running/re-running outside of your component.

Let us know if you have any questions, @onetwothreebutter!