Component River



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


yarn add component-river


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


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