react scroll inverted
js
type ScrollInvertedProps = {
classNameWrap?: string;
className?: string;
classNameContentContainer?: string;
onScrollEnd?: () => void;
onScroll?: (top: number) => void;
initialScrollTop?: number;
styleWrap?: CSSProperties;
style?: CSSProperties;
styleContentContainer?: CSSProperties;
direction?: "rtl" | "ltr";
onLayout?: (layout: { height: number; scrollHeight: number }) => void;
onEndReachedThreshold?: number;
onStartReachedThreshold?: number;
onEndReached?: () => void;
onStartReached?: () => void;
data?: T[];
renderItem: (
{
item,
index,
}: {
item: T;
index: number;
},
style: CSSProperties
) => JSX.Element | JSX.Element[] | ReactNode | null | undefined;
keyExtractor?: (item: T, index: number) => string | number;
};
`js
import { Fragment, useRef, useState } from "react";
import ScrollInverted from "@react-scroll-inverted/react-scroll";function App() {
const [state1, setState1] = useState(
new Array(10).fill(null).map((_, i) =>
${i + 1} Text)
); const refScroll = useRef < ScrollInverted < (typeof state1)[0] > null;
return (
width: "100%",
height: "100%",
display: "flex",
padding: "0 20px",
}}
>
{item}
)}
data={state1}
ref={refScroll}
onStartReached={() => {
console.log("onStartReached");
}}
keyExtractor={(item) => item}
onEndReached={() => {
console.log("onEndReached");
}}
onLayout={() => {
refScroll.current?.scrollToEnd("smooth");
}}
/>
])}
>
add data
);
}export default App;
``