QUICK RECAP

In the previous section of this chapter, we looked at the three ways of styling React Components with CSS – inline css, object reference and external css. We also went in-depth into each of them, discussing their peculiarities and scenarios when one would need to use them. The section ended with building a Color Palette Library with React called AwoCSS. In this sub-section, we would continue talking about styling React Components but delve deeper into using the External Stylesheet method because if we want to build more robust and modular code, using an External stylesheet is a good option.

EXTERNAL CSS

This involves creating an external or separate file for your styles; when using External Styling, you create an external css file (with a .css file extension) and write all your css styles in there. After you’ve done this, you then import your stylesheet at the top-level import of your component file. In the code block below, you’d see an example of this:

// Procedures for HoverCSS II
// 1. Fields of Static Text
// 2. Create the different hover styles
// 3. Button to reveal CSS Code
// 4. Functionality to copy this code

import React from "react";
import "./hovercss.css";

const HoverCSS = () => {
    const name = "Madagascar";

    const Texts = () => {
        
        const showHoverStyle = (code) => {
            return (alert(code));
        }
        
        return (
            <div>
                <h2 className="hover-letter-spacing">HoverCSS</h2><br />
                <ul className="list-elements">
                    <li className="hover-color">{name} <br/> 
                        <button onClick={() => showHoverStyle(`.hover-color:hover {
    color: red;
}`)}> Code </button>
                    </li>
                    
                    <li className="hover-shadow">{name} <br />
                        <button onClick={() => showHoverStyle(`.hover-shadow:hover {
    text-shadow: 2px 2px red;
}`)}>Code</button>
                    </li>
                    
                    <li className="hover-letter-spacing">{name}<br />
                        <button onClick={() => showHoverStyle(`.hover-letter-spacing:hover {
    letter-spacing: 2px;
}`)}>Code</button></li>

                    <br />
                    
                    <li className="hover-slant">{name} <br />
                        <button onClick={() => showHoverStyle(`.hover-slant:hover {
    font-style: italic;
}`)}>Code</button></li>

                    <li className="hover-uppercase">{name} <br />
                        <button onClick={() => showHoverStyle(`.hover-uppercase:hover {
    text-transform: uppercase;
}`)}>Code</button></li>
                    
                    <li className="hover-lowercase">{name} <br />
                        <button onClick={() => showHoverStyle(`.hover-lowercase:hover {
    text-transform: lowercase;
}`)}>Code</button></li>
                    
                    <br />
                    
                    <li className="hover-capitalize">{name} <br />
                        <button onClick={() => showHoverStyle(`.hover-capitalize:hover {
    text-transform: capitalize;
}`)}>Code</button></li>
                    
                    <li className="hover-translate">{name} <br />
                        <button onClick={() => showHoverStyle(`.hover-translate:hover {
    transform: translate(20px, 0px);
}`)}>Code</button></li>
                    
                    <li className="hover-rotate">{name} <br />
                        <button onClick={() => showHoverStyle(`.hover-rotate:hover {
    transform: rotate(2deg);
}`)}>Code</button></li>
                    
                    <br />
                    
                    <li className="hover-text-medium">{name} <br />
                        <button onClick={() => showHoverStyle(`.hover-text-medium:hover {
    font-size: 12px;
}`)}>Code</button></li>
                    
                    <li className="hover-text-large">{name} <br />
                        <button onClick={() => showHoverStyle(`.hover-text-large:hover {
    font-size: 24px;
}`)}>Code</button></li>
                    
                    <li className="hover-text-extra-large">{name} <br />
                        <button onClick={() => showHoverStyle(`.hover-text-extra-large:hover {
    font-size: 36px;
}`)}>Code</button></li>
                </ul>
                
            </div> 
        );
    }
    
    return <Texts />;
}

export { HoverCSS };
TIP
To learn more about CSS, a useful resource is available at w3schools.

CODE EXPLANATION

In the code above, we start first by importing React. Then the next import is the path of where your external stylesheet is. This can be any file path of your choice, but a general consensus is to put your stylesheet in the public folder (which would also contain your .html files); in this project, I did not do that but instead but my styles file in the same path level as my component file (this was because this project is 12 chapters long and it would have involved creating different public folders for each chapter).

After the top-level imports, we have the meat of the code. The first component we see is the HoverCSS(). This is where we define the logic of the library. First, we create a variable that would be a point of reference for the different hover effects in this library. I arbitrarily chose “Madasgacar”, because it’s a long and memorable name but you’re free to change this when implementing this code. Second, we create another component, called Texts(). This component is referred to as a Nested Component. We can have varying degrees/levels of Nested Components, as you would notice that even Texts() has another component called showHoverStyle(). This functionality is not peculiar to React, it is a feature of programming especially common with Declarative Programming. We can have functions that contain other functions. As you must be aware, you can sense the dangers of having a lot of nested components, this can lead to spaghetti code and it can make your code harder to maintain and less readable. Also, this breaks one of the rules of Declarative Programming which is Idempotence – this is gotten from Mathematics, and it relates to a function doing one thing. When you have a lot of components inside another component, you’re more likely to break this rule and run into errors in your code. Use Nested Components but be aware of their downsides.

Texts() is the component where the logic of the code resides, and as you would have noticed in the code block above, I had iterated the steps to be taken:

  1. Create a Static Text variable – const name.
  2. Create the different hover styles – this was done in the Texts() component.
  3. Button to reveal CSS Code – this would involve using the alert function; the showHoverStyle() component handles this.
  4. The client (user) selects the Hover Style then copies the code and applies it to any html element.

In summary what the Texts() component does is it takes each html element by using a selector, then applies an onclick event to it to show the style. Below are the current styles in the HoverCSS library; they have been divided into different effect categories e.g. Color Change, Text Shadow etc.

h2 {
    margin-left: 6.8%;
    margin-top: 3%;
    margin-bottom: 0;
}

/* Color Change */
.hover-color:hover {
    color: red;
}

/* Text Shadow */
.hover-shadow:hover {
    text-shadow: 2px 2px red;
}

/* Letter Spacing */
.hover-letter-spacing:hover {
    letter-spacing: 2px;
}

/* Text Slant */
.hover-slant:hover {
    font-style: italic;
}

/* Text UpperCase */
.hover-uppercase:hover {
    text-transform: uppercase;
}

/* Text LowerCase */
.hover-lowercase:hover {
    text-transform: lowercase;
}

/* Text Capital Case */
.hover-capitalize:hover {
    text-transform: capitalize;
}

/* Text Translate */
.hover-translate:hover {
    transform: translate(20px, 0px);
}

/* Text Rotate */
.hover-rotate:hover {
    transform: rotate(2deg);
}

/* Text Size Medium */
.hover-text-medium:hover {
    font-size: 12px;
}

/* Text Size Large */
.hover-text-large:hover {
    font-size: 30px;
}

/* Text Size Extra Large */
.hover-text-extra-large:hover {
    font-size: 36px;
}

/* Font Weight, Linear Gradient  */

.list-elements li {
    text-align: center;
    display: inline-block;
    width: 5%;
    height: 20px;
    font-size: 24px;
    padding-right: 20%;
    padding-bottom: 15%;
    /*border: 2px solid black;*/
    margin: 2%;
}

HoverCSS ends this chapter. I know we have covered quite a lot, but I want you to get your feet wet. Start by expanding the libraries, for AwoCSS, select unique colors in your country, get inspiration from the food, clothes etc and expand the palette of the library making it yours. You could also add your own functionality e.g. A unique way for the user to copy the colors, showing other color formats like hsl, hsv, hex code etc. For HoverCSS, you can expand the effect categories and even use other CSS elements like the animation, transition etc. In the next Chapter, I would be building an API (I heard you jump) and discussing another big aspect of React – Props.

Lare is an Applied Machine Learning Engineer. reactbyprojects is a journal of his journey towards mastering react while helping other people who might be interested in this technology. To view more of his Software Engineering projects, you can go to https://laresamdeola.com and for Machine Learning - https://machinelearning.com.ng. You can reach him via email lare@reactbyprojects.com or through his github https://github.com/laresamdeola

Related Article

0 Comments

Leave a Comment