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