Splitting() in React's componentDidMount not working
onetwothreebutter opened this issue · comments
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?
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.
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!