feat: add customizable gradient props to Shimmer component #1
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Summary
This pull request enhances the
Shimmer
component by introducing new props to customize the linear gradient animation. Previously, the gradient colors and their start/end coordinates were hardcoded, limiting flexibility.This change allows users to specify:
linearGradients
: An array of color strings for the gradient.gradientStart
: An object{ x: number, y: number }
for the gradient's starting point.gradientEnd
: An object{ x: number, y: number }
for the gradient's ending point.Default values are provided for these new props to maintain existing behavior if they are not specified. The component's
Props
interface and the project'sREADME.md
have been updated to reflect these additions.Test plan
Default Behavior:
Shimmer
component within aShimmerProvider
without passing any of the new props (linearGradients
,gradientStart
,gradientEnd
).Custom
linearGradients
:Shimmer
component and pass a customlinearGradients
prop, for example:linearGradients={['#FF000050', '#00FF0050', '#0000FF50']}
.Custom
gradientStart
andgradientEnd
:Shimmer
component and pass customgradientStart
andgradientEnd
props to change the gradient direction. For example, for a vertical shimmer:gradientStart={{ x: 0.5, y: 0 }}
gradientEnd={{ x: 0.5, y: 1 }}
Combination of Custom Props:
Shimmer
component passing custom values forlinearGradients
,gradientStart
, andgradientEnd
simultaneously.README Documentation:
README.md
file.Shimmer
component should accurately list and describelinearGradients
,gradientStart
, andgradientEnd
, including their types and default values.