How to Build a Tool for Generating Linear and Radial Gradients with React: Complete Tutorial, Part 1

INTRODUCTION

Hey fellow developers and welcome to an exciting journey into the colorful world of gradient generation! In this tutorial, we'll use React, utilize the react-colorful library for color manipulation, add smooth animations with framer-motion, ensure type safety with TypeScript, and style our app using Sass.

Let's outline the key topics we'll cover in this tutorial:

• Start the project and set up React and Vite, install necessary dependencies
• Add custom fonts and other media
• Include types and constants.
• Create a basic layout with a header and logo.
• Add a feature to switch between light and dark themes.
• Make gradients using a Gradient Generator.
• Create the Color Picker Component using the react-colorful library
• Let users copy gradient CSS code.
• Add animation to your gradients using framer-motion.

Let's begin!

Project init, React + Vite, installing necessary dependencies

Creating a React app using React and Vite, TypeScript, and Sass is a great way to kickstart your web development project.

1. Open your terminal and run the following command to create a new React app using Vite

npm create vite@latest

2. Choose a name for the project, then choose React and Typescript when prompted

         3. Select React from the list of frameworks

        4. Select TypeScript

       5. Navigate to the project folder

cd react-gradient-generator

6. Run the following command

npm install

7. To use Sass for the project, we have to install the SASS package

npm install --save-dev sass

8. We’ll need classnames package for effective classNames management

npm install --save classnames

9. vite-plugin-svgr to transform SVGs into React components

npm install --save-dev vite-plugin-svgr

10. Integrating react-colorful for color selection

npm install react-colorful

11. And we need to install Framer Motion - a library to make animations and transitions.

npm install --save framer-motion

12. When initialization is complete, select your newly created project and then run

npm run dev

Open http://127.0.0.1:5173 to view it in the browser.

Adding custom fonts and other media

We will use Quicksand and SourceCodePro fonts and place files in an "assets/fonts" folder.

/* src/styles/abstracts/fonts.scss */

@font-face {
    font-family: 'Quicksand-Regular';
    src: local('Quicksand-Regular');
    url(../../assets/fonts/Quicksand/Quicksand-Regular.ttf)
    format('truetype');
  }

We’ll also add these fonts to the variables.

/* src/styles/abstracts/variables.scss */

$font-main-regular: 'Quicksand-Regular';
$font-main-semi-bold: 'Quicksand-SemiBold';
$font-main-bold: 'Quicksand-Bold';
$font-code-regular: 'SourceCodePro-Regular';
$font-code-semi-bold: 'SourceCodePro-SemiBold';

We must ensure that our app can accommodate various display resolutions, which is why we incorporate breakpoints into variables for potential future needs.

/* src/styles/abstracts/variables.scss */

  $break-points: (
    extraSmall: 450px,
    small: $smallBreakPoint,
    medium: 1050px,
    large: 1350px,
  );

  $smallBreakPoint: 750px;

One of the key features of SCSS is the ability to create reusable code snippets called mixins. We'll create and use a handy @mixin called flex-center for centering elements both horizontally and vertically using flexbox.

/* src/styles/abstracts/mixins.scss */

  @mixin flex-center {
    display: flex;
    justify-content: center;
    align-items: center;
  }

The icons that we are going to use are stored in ./src/assets/svg in SVG format.

Additionally, we should reset certain default browser styles.

/* src/styles/global.scss */

  @use 'abstracts' as *;

  *,
  *::after,
  *::before, {
    box-sizing: border-box;
  }

  html,
  body {
    padding: 0;
    margin: 0;
    background-color: var(--background-color);
    font-family: $font-main-regular;
  }

  h1, h2, p {
    margin: 0;
  }

  main {
    padding: 10px 20px 20px;
  }

Adding types and constants

Next, we must create TypeScript Interfaces, constants, and enums. To begin, we'll focus on defining constants for periods, countries, and subjects.

/* src/shared/constants.ts */

  export enum GradientTypes {
    LINEAR = 'linear',
    RADIAL = 'radial',
  }

  export enum ThemeMode {
    DARK = 'dark',
    LIGHT = 'light',
  }

We must establish data interfaces to ensure consistency, and in this context, we will also employ enums as mentioned earlier. For further information on Interfaces and Mapped types in Typescript, you can refer to the Typescript documentation.

/* src/shared/types/interfaces.ts */

  export interface GeneralMessage {
    id: string;
    text: string;
    lifeTime: number;
  }


  export interface Palette {
    id: string;
    color: string;
    position: number;
  }

Summary

In conclusion, we've reached the end of today's tutorial segment. To summarize our progress so far:

• We began by creating the project using Vite.
• We incorporated custom fonts and other media.
• We also introduced types and constants into the project.

Congratulations on completing these substantial tasks! In Part 2 of this tutorial, we'll continue working on this project together. Stay tuned, and we'll catch up with you soon!