DEPRECATED

⛔ 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.

react-waving-flag

A simple animated waving flag from a jpg/png image

Features

• 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)

Installation

npm install @garvae/react-waving-flag

or

yarn add @garvae/react-waving-flag

Properties (Optional)

| 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 |

Example

const App = () => {

  // ...

  return (
    <div>
      <WavingFlag
        flag="https://external-preview.redd.it/QVS6D1FlDcpx7byaow-LyO4GpezIlepIkozbzwqtFOY.png?auto=webp&s=d60d5e9953842259ade3c425c55354f6651029f4"
        height={200}
        width={300}
      />
    </div>
  );
};

🤝 Contributions

🤝 Contributions, issues and feature requests are welcome! Feel free to check issues page and pull request page.

❤️ Give a ⭐ if you like this project!

📞 Contact me

🌐 Contact page

🔳 QR code

🔗 Links

• E-mail
• Telegram
• Facebook
• Instagram
• LinkedIn
• GitHub

🚀 Mentoring

If you want to grow 🚀 fast in front-end development - contact me! 🙋‍♂

📄 License

See license in the "LICENCE" file