⛔ This package has been deprecated and is no longer supported because the solutions used in this package do not meet quality standards and are not efficient enough to implement such tasks.
A simple animated waving flag from a jpg/png image
- lightweight
- can be shown from both left and right sides of the screen
- animated with CSS
- ready for TypeScript
The UI of the component assumes its use from the edge of the container (screen)
npm install @garvae/react-waving-flagor
yarn add @garvae/react-waving-flag| Name | Type | Default | Required | Description |
|---|---|---|---|---|
| animationSpeed | number |
1 | - | Speed of the "waving" animation (seconds) |
| boxShadowColor | string |
'#f8f8f8' | - | CSS color property. Flag shadow color. |
| className | string |
- | Container className | |
| curvature | number |
10 | - | Wave distortion degree. The smaller the value, the smoother the wave. |
| flag | string |
- | JPG/PNG flag picture URL | |
| flagContainerClassName | string |
- | Flag container className | |
| fromLeft | boolean |
true | - | Set this param to "false" if you want to show the flag from right side of screen |
| height | number |
200 | - | Flag height |
| isShadow | boolean |
true | - | Option to disable flag shadow |
| width | number |
300 | - | Flag width |
const App = () => {
// ...
return (
<div>
<WavingFlag
flag="https://external-preview.redd.it/QVS6D1FlDcpx7byaow-LyO4GpezIlepIkozbzwqtFOY.png?auto=webp&s=d60d5e9953842259ade3c425c55354f6651029f4"
height={200}
width={300}
/>
</div>
);
};
🤝 Contributions, issues and feature requests are welcome!
Feel free to check issues page and pull request page.
❤️ Give a ⭐ if you like this project!
If you want to grow 🚀 fast in front-end development - contact me! 🙋♂