Skip to content

Commit

Permalink
updated README to include the GradientCopyButton
Browse files Browse the repository at this point in the history
  • Loading branch information
ammaaraslam committed Aug 10, 2022
1 parent 3e603ae commit ec00de8
Showing 1 changed file with 1 addition and 0 deletions.
1 change: 1 addition & 0 deletions src/plays/react-gradients/Readme.md
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,7 @@ The implementation of the play is fairly simple.
1. `codeToCopy` - The text that needs to be copied.
2. `message` - The message to be displayed in the toast. *(If user clicked to copy the TailwindCSS code, the message argument is "TailwindCSS". Then the toast says "Copied TailwindCSS")*
- >**Note:-** Initially, there were three different functions(`copyTailwind`, `copyCSS`, `copyColor`) to copy. Later combined these functions into one, the `copyCode` function for better practice and efficiency.
- Also in the `GradientComponent` component, you will find a `GradientCopyButton` component. This is a button component for copying the different TailwindCSS, CSS and color codes. It also displays a tooltip on hover. This tooltip is achieved by using react useState hook, `debounce` function of `lodash` to set delay on hover and onMouseEnter,onMouseLeave events to set the state of a state variable. Then the tooltip is conditionally displayed using that state variable.
- And finally, the play uses `react-hot-toast` *(a notification library for react)* to display a message after user has copied.

## Contributing
Expand Down

0 comments on commit ec00de8

Please sign in to comment.