Fade in-out text in react
Tags: javascript, react, programming, productivity
Published: 2021-04-10 03:47:47

*In case it helped :)*
<a href="https://www.buymeacoffee.com/aseemwangoo" target="_blank"><img src="https://www.buymeacoffee.com/assets/img/custom_images/orange_img.png" alt="Pass Me A Coffee!!" style="height: 41px !important;width: 174px !important;box-shadow: 0px 3px 2px 0px rgba(190, 190, 190, 0.5) !important;-webkit-box-shadow: 0px 3px 2px 0px rgba(190, 190, 190, 0.5) !important;" ></a>

<!-- wp:paragraph -->
<p>View the demo here</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p><strong><em>Website: </em></strong><a href="https://funwithreact.web.app/" rel="noreferrer noopener" target="_blank"><strong><em>https://funwithreact.web.app/</em></strong></a></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>We will go through the following steps</p>
<!-- /wp:paragraph -->

<!-- wp:list {"ordered":true} -->
<ol><li>Add CSS</li><li>Create Fader Component</li><li>Fade in-out logic</li><li>Cleanup side effect</li></ol>
<!-- /wp:list -->

{% youtube tSxrWT4B9gY %}

<!-- wp:heading {"level":4} -->
<h4>Add CSS</h4>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Let’s start by adding CSS which will help us in achieving the fade-in-out effect.</p>
<!-- /wp:paragraph -->

<!-- wp:preformatted -->
<pre class="wp-block-preformatted">.fade-in {<br>    transition: opacity 1s ease;<br>}</pre>
<!-- /wp:preformatted -->

<!-- wp:preformatted -->
<pre class="wp-block-preformatted">.fade-out {<br>    opacity: 0;<br>    transition: opacity 1s ease;<br>}</pre>
<!-- /wp:preformatted -->

<!-- wp:paragraph -->
<p>The class names are self-explanatory!</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":4} -->
<h4>Create Fader Component</h4>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>We create a reusable component and name it <strong>Fader. </strong>This component will include the UI + business logic to achieve the fade-in-out.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p><strong>Define props</strong></p>
<!-- /wp:paragraph -->

<!-- wp:list -->
<ul><li>This component will take in a text prop, which is of type string</li><li>We also assign a default value to the text prop</li></ul>
<!-- /wp:list -->

<!-- wp:preformatted -->
<pre class="wp-block-preformatted">Fader.defaultProps = {
    text: 'Hello World!'
}

Fader.propTypes = {
    text: PropTypes.string,
}</pre>
<!-- /wp:preformatted -->

<!-- wp:list -->
<ul><li>Import the CSS file, inside the component (in our case <strong>App.css</strong>)</li></ul>
<!-- /wp:list -->

<!-- wp:paragraph -->
<p><strong>Initial State</strong></p>
<!-- /wp:paragraph -->

<!-- wp:list -->
<ul><li>We import the <a rel="noreferrer noopener" href="https://reactjs.org/docs/hooks-state.html" target="_blank">useState</a> hook from React.</li><li>Set the initial value of our property to <code>fade-in</code>&nbsp;</li></ul>
<!-- /wp:list -->

<!-- wp:image {"className":"is-style-default"} -->
<figure class="wp-block-image is-style-default"><img src="https://cdn-images-1.medium.com/max/1600/1*D2BGWawtBO1MR8xhZa1-vA.png" alt="Set initial state"/><figcaption>Set initial state</figcaption></figure>
<!-- /wp:image -->

<!-- wp:list -->
<ul><li>We make use of this property and assign it to our classname of Html element.</li></ul>
<!-- /wp:list -->

<!-- wp:preformatted -->
<pre class="wp-block-preformatted">return (<br>    &lt;&gt;<br>      &lt;h1 className={fadeProp.fade}&gt;{text}&lt;/h1&gt;<br>    &lt;/&gt;<br>)</pre>
<!-- /wp:preformatted -->

<!-- wp:paragraph -->
<p><strong>fadeProp.fade</strong>: Is the CSS class name</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p><strong>text</strong>: Is the Fader property</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":4} -->
<h4>Fade in-out&nbsp;logic</h4>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Let’s bring in the <a href="https://reactjs.org/docs/hooks-effect.html" rel="noreferrer noopener" target="_blank">useEffect</a> hook</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>The <code>useEffect(callback, [prop, state])</code> invokes the <code>callback</code> after the changes are being committed to DOM and <em>if and only if</em> any value in the dependencies array <code>[prop, state]</code> has changed.</p>
<!-- /wp:paragraph -->

<!-- wp:preformatted -->
<pre class="wp-block-preformatted">useEffect(() =&gt; {
     const timeout = setInterval(() =&gt; {
        if (fadeProp.fade === 'fade-in') {
           setFadeProp({
                fade: 'fade-out'
           })
        } else {
             setFadeProp({
                fade: 'fade-in'
             })
        }
     }, 4000);

return () =&gt; clearInterval(timeout)
}, [fadeProp])</pre>
<!-- /wp:preformatted -->

<!-- wp:list -->
<ul><li>We use the <a href="https://javascript.info/settimeout-setinterval" rel="noreferrer noopener" target="_blank">setInterval</a> which takes in the callback and duration (4 sec in our case)</li><li>Inside the setInterval callback, we check for the current css classname</li><li>Since we assigned the initial class as <code>fade-in</code> we check for that and change the class accordingly</li><li>Note the callback or the if/else executes every 4 seconds</li></ul>
<!-- /wp:list -->

<!-- wp:heading {"level":4} -->
<h4>Cleanup side&nbsp;effect</h4>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>If the <code>callback</code> of <code>useEffect(callback)</code> returns a function, then <code>useEffect()</code> considers this as an <em>effect cleanup</em>:</p>
<!-- /wp:paragraph -->

<!-- wp:preformatted -->
<pre class="wp-block-preformatted">return () =&gt; clearInterval(timeout)</pre>
<!-- /wp:preformatted -->

<!-- wp:list -->
<ul><li>We add this line for effect cleanup.</li><li>This cancels the previous timer before starting a new one.</li></ul>
<!-- /wp:list -->

<!-- wp:paragraph -->
<p>Cleanup works the following way:</p>
<!-- /wp:paragraph -->

<!-- wp:list {"ordered":true} -->
<ol><li>After initial rendering, <code>useEffect()</code> invokes the callback having the side effect. In our case, <code>timeout</code>&nbsp;</li></ol>
<!-- /wp:list -->

<!-- wp:paragraph -->
<p>2. On later renderings, before invoking the next side-effect callback, <code>useEffect()</code> <em>invokes</em> the <code>clearInterval</code> function from the previous side-effect execution then runs the current side-effect.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>3. Finally, after unmounting the component, <code>useEffect()</code> <em>invokes</em> the <code>clearInterval</code> function from the latest side-effect</p>
<!-- /wp:paragraph -->

{% youtube tSxrWT4B9gY %}

*In case it helped :)*
<a href="https://www.buymeacoffee.com/aseemwangoo" target="_blank"><img src="https://www.buymeacoffee.com/assets/img/custom_images/orange_img.png" alt="Pass Me A Coffee!!" style="height: 41px !important;width: 174px !important;box-shadow: 0px 3px 2px 0px rgba(190, 190, 190, 0.5) !important;-webkit-box-shadow: 0px 3px 2px 0px rgba(190, 190, 190, 0.5) !important;" ></a>

<!-- wp:paragraph -->
<p><a rel="noreferrer noopener" href="https://github.com/AseemWangoo/expriments_with_react" target="_blank"><em>Source code.</em></a>

<!-- wp:paragraph -->
<p><strong><em>Website: </em></strong><a href="https://funwithreact.web.app/" rel="noreferrer noopener" target="_blank"><strong><em>https://funwithreact.web.app/</em></strong></a></p>
<!-- /wp:paragraph -->