1.0.1 • Published 3 years ago
react-floating-icons v1.0.1
React Floating Icons
A React component that allows you to add N floating items to a container. It is Full configurable. Container, items, floating effect, etc. Find out props below.
I do NOT own the images used for the "Luigi's Mansion" demo.
Its purpose is just to show one of the use cases of this component.Table of Contents
Getting started
Install react-floating-icons. Coming soon.
Usage
import { useState } from "react";
import FloatingIcons, { IFloatingIconsProps } from "react-floating-icons";
const FloatingIconsWrapper: IFloatingIconsProps = () => {
const backgroundContent = {
imagePath: "<img_url>",
};
const items = [
{
id: "<unique_id_1>",
src: "<img_url>",
altText: "Some text that describes image 1",
position: { x: "120px", y: "100px" },
animationDuration: "1s",
},
{
id: "<unique_id_2>",
src: "<img_url>",
altText: "Some text that describes image 2",
position: { x: "180px", y: "100px" },
animationDuration: "1s",
},
{
id: "<unique_id_3>",
src: "<img_url>",
altText: "Some text that describes image 3",
size: { width: "40px", height: "40px" },
position: { x: "250px", y: "100px" },
animationDuration: "1s",
},
];
return <FloatingIcons backgroundContent={backgroundContent} items={items} />;
};Props
| Prop | Type | Description |
|---|---|---|
| items(required) | object[] | Icons/Items with the following keys: id: string - Unique identifier for the item.position: { x: string, y: string } - Position of the item.size?: { width: string; height: string } - Custom size of the item. Usefull to resize big images.animationDuration?: string - Custom animation duration. 3 seconds by default.className?: string - ClassName for the image or any custom html passed.src?: string - Source/url of the image passed.isNotImage?: boolean - If you want to pass a custom HTML set this prop to true. Defaults to false.altText?: string - Description of the image (alt attribute for img HTML tag).content?: string or ReactNode - Custom string or HTML instead of image (src). |
| backgroundContent(optional) | object | The background of the container with the following keys: imagePath?: string - If you want an image as background, send the url.color?: string - If you want some color send it as you would apply to the css background-color. |
| sizeWrapper(optional) | object | The size of the container with the following keys: width: string - width of the container. Defaults to 100%height: string - height of the container. Defaults to 400px |
Browser Compatibility
Coming soon.
Contributing
- Pull requests are very welcome :)
- If something is not working properly, please create an issue.