Component River

👏
👁
💅🏻
👳🏾
🍻
🙏
👻
💡
🍉
⚽️
🏝
💦
👄
🤖
🥇
💾
🗿
👋
💊
🎧
🎾
🌈
🛎
❤️

Usage

Warning
framer-motion is a peer dependency, you must install it if you do not already have it

Install

yarn add component-river

Import

import River from 'component-river'

!
Add a height and width to your containing element. The items are positioned absolutely (with overflow hidden!), so the container needs a width and height.

Basic Example

Props

PropRequiredTypeDefaultDescription
allItems✔️Array of ObjectsThe items you want to flow down the river
reactKey✔️StringMaps to a unique key in each object in allItems. Example: allItems = { label: 'hello'}, {label: 'world'}, label should be used as the unique key
Component✔️React ComponentThe component to render. Each object in allItems will be passed to Component as props
amountOfRowsNumber1
yDistanceBetweenRowsNumber (px)50Distance between rows vertically in pixels
yVariationNumber (px)30Distance each item will move up and down in pixels
yDurationNumber (s)3How long it takes an item to go from top of curve to bottom in seconds
xDistanceBetweenItemsNumber (px)0Distance between each item horizontally in pixels
xDurationNumber (s)20How long it takes each item to move across the screen in seconds. (This amount is based on a 1920px width screen, it gets changed automatically to keep the same "speed" if the screen is smaller)
classNameString or FuncA className for the container that wraps your Component. If you pass a function, that function will receive { rowNumber, numberInQueue } as arguments. When using a function, return a string.

Advanced Example

Check the code!