How do I make Fade responsive?

[jungsikjeong]

 <Contents>
            <Fade>
              <h1 className='title'>title..</h1>

              <div className='text'>
                <Fade delay={1e3} cascade damping={0.3e-1}>
                    some texts...some texts...some texts...some texts...
                </Fade>
              </div>
            </Fade>
</Contents>

I wrote this.
But when the screen gets smaller, the text goes through the div element.
display: inline-block; white-space: pre;
Fade of white-space: pre; I think it's because of this, so I tried:

import { Fade} from 'react-awesome-reveal';

const StyledFade = styled(Fade)`
  white-space: break-spaces;
`;

    <Contents>
              <Fade>
                <h1 className='title'>...</h1>

                <div className='text'>
                  <StyledFade delay={1e3} cascade damping={0.3e-1}>
                     ....
                  </StyledFade>
                </div>
              </Fade>
            </Contents>

The animation that appears one letter at a time does not work, but only the fade-in animation is working. How do I solve this?

[SteveAtKlover]

@jungsikjeong you can use something like https://www.npmjs.com/package/react-responsive to detect media queries in JS/TS

[morellodev]

This is not something in charge of this lib, closing this