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.
- Language: js
- Level: Intermediate
- User: ammaaraslam
- Gihub Link: https://github.com/ammaaraslam
- Blog:
- Video:
The implementation of the play is fairly simple.
- Firstly it consumes data (list of gradients and its details) from a
json
file calledgradients.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 gradienttailwind
- 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 theGradientComponent.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.
First of all thanks for wanting to contribute! To start contributing to this play, please go through the Contribution guidelines of ReactPlay.
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:Example:{ "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"] },
{ "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!
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
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!!
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
- New feature (non-breaking change which adds functionality)
This play has been tested on my local machine. It creates no new errors and passes all unit tests. Screenshots:
- 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