/color-scheme-generator-react

Primary LanguageJavaScriptMIT LicenseMIT


Color Scheme Generator

My solo project - Color Scheme Generator (from The Frontend Developer Career Path of Scrimba)
Explore the docs »

View Demo · Report Bug · Request Feature

Table of Contents
  1. About The Project
  2. Getting Started
  3. Roadmap
  4. Issues and solutions
  5. License
  6. Contact
  7. Acknowledgments

About The Project

My solo project - Color Scheme Generator.

(back to top)

Built With

  • React

  • TailwindCSS

  • React Hooks

    • useState
    • useCallback

(back to top)

Getting Started

This is an example of how you may give instructions on setting up your project locally. To get a local copy up and running follow these simple example steps.

Installation

Install packages

yarn

Launch at localhost in development mode

yarn start

(back to top)

Roadmap

  • Click to copy color to clipboard

See the open issues for a full list of proposed features (and known issues).

(back to top)

Issues and solutions

Vertical align text in <p>?

Solution

flex items-center justify-center

How to display check mark in the selected <option> in <select>?

Solution

Vertical stretch flex item in flex direct row parent?

Solution

set self-stretch to the flex item

Scale to increase the size of flex item without changing the layout of the parent?

Solution

Show copy toast and hide after seconds

Solution

debounce

debounce does not work?

Root cause:

This is a caveat of function components. Local variables inside a function expires after every call. Every time the component is re-evaluated, the local variables gets initialized again.

Solution

https://rajeshnaroth.medium.com/using-throttle-and-debounce-in-a-react-function-component-5489fc3461b3

debounce function in helper.js:

export default function debounce(func, timeout) {
  let timer;
  return (...args) => {
    clearTimeout(timer);
    timer = setTimeout(() => {
      func(...args);
    }, timeout);
  };
}

Before

  const hideToast = debounce(() => setShowToast(false), 2000);

After wrap the usage using useCallBack()

const hideToast = useCallback(
    debounce(() => setShowToast(false), 2000),
    []
  );

(back to top)

License

Distributed under the MIT License. See LICENSE.txt for more information.

(back to top)

Contact

Jen Chen

Project Link: https://github.com/yujhenchen/color-scheme-generator-react

(back to top)

Acknowledgments

(back to top)