A simple component that can be used to implement drag-to-scroll functionality. Scrolling can be done along the horizontal axis, vertical axis or both.
npm install react-simple-scrollboxA simple component that can be used to implement drag-to-scroll functionality. Scrolling can be done along the horizontal axis, vertical axis or both.
``typescript
function randomColor(): string {
switch (Math.floor(Math.random() * 3)) {
case 0:
return 'red';
case 1:
return 'green';
case 2:
return 'blue';
default:
return 'black';
}
}
const Horizontal: React.FC = () => {
return (
{
Array.from(Array(100).keys()).map((key: number) => (
))
}
);
}
const Vertical: React.FC = () => {
return (
{
Array.from(Array(100).keys()).map((key: number) => (
))
}
);
}
const Both: React.FC = () => {
return (
{
Array.from(Array(100).keys()).map((key: number) => (
{
Array.from(Array(100).keys()).map((key2: number) => (
))
}
))
}
);
}
const App = () => {
return (
children: React.ReactNode - The child to be in the ScrollBox.scrollDirection: string ('vertical' | 'horizontal' | 'both') - The direction(s) that should be possible to scroll in.
showVerticalScrollBar: boolean (optional, default false) - Shows a scrollbar on the vertical axis if content is taller than the container.showHorizontalScrollBar: boolean (optiona, default false) - Show a scrollbar on the horizontal axis if content is wider than the container.