@katyperrycbt/react-mui-scroll-view v0.0.1

react-mui-scroll-pages

React Component is based on the Scroll View Horizontal idea of React Native, used in combination with Material UI

Notes

Only should be used in projects that have been built with React and Material-UI (MUI), if not, these installations are required.

Installing

Make sure you install React, MUI (material-ui) and MUI Icons (material-ui icons)

yarn add react-mui-scroll-pages

Example

import React, { useState, useEffect } from 'react';

import {
    Container, Grid,
    IconButton, Stack
} from '@mui/material';

import ArrowBackIcon from '@mui/icons-material/ArrowBack';
import ArrowForwardIcon from '@mui/icons-material/ArrowForward';

import ScrollPaper from 'react-mui-scroll-pages';

import EachChild = ({item, sizes}) => <div>Hello {sizes.width}x{sizes.height}</div>

const MyCarousel = () => {
    // other code ...
    const [items, setItems] = useState([...Array(10).keys()]);
    const [itemsSizes, setItemsSizes] = useState({ width: 0, height: 0 });

    const config = {
        mui: {
            Grid,             // required
            Container,        // required
            IconButton,       // required
            Stack,            // required
            ArrowBackIcon,    // required
            ArrowForwardIcon, // required
        },
        buttonStyle: {
            backgroundColor: 'grey',
        },
        getElementSizes: (data) => {
            if (JSON.stringify(sizes) !== JSON.stringify(data)) {
                setItemsSizes(data); // get Item Sizes if needed
            }
        },
        React,              // required
    }

    return <ScrollPaper {...config}>
        {items?.length > 0 && items.map((item, index) => (
              <EachChild
                  key={`render-item-list-${index}`}
                  item={item}
                  sizes={itemsSizes}
             />
       ))}
   </ScrollPaper>

}

Props & Function