Skip to content

Latest commit

 

History

History
103 lines (72 loc) · 4.52 KB

Readme.md

File metadata and controls

103 lines (72 loc) · 4.52 KB
Raw

React Gradients

React Gradients is list of beautiful gradients which you can easily use for your application by copying the CSS/TailwindCSS code for the desired gradient. You can also copy each color that has been used in the gradient.

Play Demographic

  • Language: js
  • Level: Intermediate

Creator Information

Implementation Details

The implementation of the play is fairly simple.

  • Firstly it consumes data (list of gradients and its details) from a json file called gradients.json.
  • Then it uses the .map() function to loop through this data and get each object (gradient).
  • Each object/gradient has the following properties:
    • name - The Name of the gradient
    • tailwind - The TailwindCSS code for the gradient.
    • css - The CSS code for the gradient.
    • colors - A list of colors used in the gradient.
  • The properties of each gradient is passed to the separate component named GradientComponent in the GradientComponent.js file to be styled and displayed.
  • In the GradientComponent component, you will find the following three functions to copy:
    • copyTailwind - This function copies the TailwindCSS code of the gradient.
    • copyCSS - This function copies the CSS code of the gradient.
    • copyColor - This function copies the colors used in the gradient.
  • And finally, the play uses react-hot-toast (a notification library for react) to display a message after user has copied.

Contributing

First of all thanks for wanting to contribute! To start contributing to this play, please go through the Contribution guidelines of ReactPlay.

Adding a new gradient

Currently to add a new gradient, you'll have to create a new json object in the gradients.json file. To do so, please follow the below steps.

  • In the gradients.json file, add a new gradient of choice using the following syntax: 
    {
    "name": "Name of the Gradient",
    "css": "CSS code for the gradient.",
    "tailwind": "TailwindCSS code for the gradient",
    "colors": ["A list containing all the colors used in the gradient"]
},
    Example: 
    {
    "name": "Flamingo",
    "css": "linear-gradient(to right, #f472b6, #db2777)",
    "tailwind": "bg-gradient-to-r from-pink-400 to-pink-600",
    "colors": ["#f472b6", "#db2777"]
},
  • Then create a Pull Request referencing this play.

Note:- Please make sure to add all your colors in the form of HEX. Please use this converter if you have used any other format.

Also Note:- In the future, I'm hoping to add a feature where you are able to add a gradient easily by filling a simple form directly from the play so that you don't have to go through the trouble of doing everything manually, so stay tuned for that!

Resources

Learn more about react-hot-toast -https://react-hot-toast.com/docs

Learn more about JSON Objects - https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects/JSON

Thanks for your time!

Thank you so much for taking the time to read this. If you like this play, please do share about it and tag me @itsammaar_7 and @ReactPlayIO. Also star the react-play repository, it gives me and all the contributors a boost in confidence

Happy Coding!!

Description

This is a new play consisting of a collection of beautiful gradients that can be copied either as TailwindCSS or CSS code and use in their application. Users are also able to copy each color used in a gradient.

Fixes #442

Type of change

  • New feature (non-breaking change which adds functionality)

How Has This Been Tested?

This play has been tested on my local machine. It creates no new errors and passes all unit tests. Screenshots:

Checklist:

  • I have performed a self-review of my own code
  • I have commented my code, particularly in hard-to-understand areas
  • I have made corresponding changes to the documentation
  • My changes generate no new warnings
  • I have added tests that prove my fix is effective or that my feature works
  • New and existing unit tests pass locally with my changes
  • Any dependent changes have been merged and published in downstream modules