https://github.com/itzaymvn/react-scrollable-list

A React component for creating a scrollable list that supports infinite scrolling. This component is highly customizable and easy to use in your projects.
https://github.com/itzaymvn/react-scrollable-list

Last synced: about 4 hours ago
JSON representation

A React component for creating a scrollable list that supports infinite scrolling. This component is highly customizable and easy to use in your projects.

• Host: GitHub
• URL: https://github.com/itzaymvn/react-scrollable-list
• Owner: itzAymvn
• Created: 2024-07-28T22:42:49.000Z (4 months ago)
• Default Branch: master
• Last Pushed: 2024-07-29T23:13:55.000Z (4 months ago)
• Last Synced: 2024-08-31T00:50:44.949Z (3 months ago)
• Language: TypeScript
• Homepage: https://www.npmjs.com/package/@aymvn/react-scrollable-list
• Size: 24.4 KB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# ScrollableList Component

A React component for creating a scrollable list that supports infinite scrolling. This component is highly customizable and easy to use in your projects.

## Installation

To install the `ScrollableList` component, you can use npm or yarn:

```bash

npm install @aymvn/react-scrollable-list

```

## Usage

```jsx

import React from "react"

import { ScrollableList } from "@aymvn/react-scrollable-list"

const items = [

	{

		id: 1,

		name: "Item 1",

	},

	{

		id: 2,

		name: "Item 2",

	},

]

const renderItem = (item, index) => 
{item.name}


const App = () => {

	const handleEndReached = () => {

		console.log("End of list reached")

	}

	return (

		Loading...}

		/>

	)

}

export default App

```

## Props

The ScrollableList component accepts the following props:

-   **items:** An array of items to render in the list.

-   **renderItem:** A function to render each item.

-   **onEndReached:** A callback function that is called when the end of the list is reached or near.

-   **endReachedThreshold:** The threshold (in pixels) from the end of the scrollable content at which the onEndReached callback should be triggered.

-   **loading:** A boolean indicating if a loading indicator should be displayed.

-   **containerClassNames:** An optional class name to apply to the container element.

-   **containerStyles:** An optional style object to apply to the container element.

-   **loadingElement:** An optional JSX element to display while loading.

## Example

Here's an example of how to use the ScrollableList component:

```jsx

import React, { useState } from "react"

import ScrollableList from "your-package-name"

const ExampleComponent = () => {

	const [items, setItems] = useState([...initialItems])

	const [loading, setLoading] = useState(false)

	const fetchMoreItems = () => {

		setLoading(true)

		// Simulate a network request

		setTimeout(() => {

			setItems((prevItems) => [...prevItems, ...newItems])

			setLoading(false)

		}, 1000)

	}

	const renderItem = (item, index) => 
{item}


	return 

}

export default ExampleComponent

```

## License

This project is licensed under the MIT License.