@garvae/react-waving-flag NPM

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

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>
  );
};