@scrolia/react-native/dist/components/content/x.mjs

A headless scrollbar component

"use client";


import { useScrollCore } from "../../contexts/scrollcore.mjs";
import { getComponentProps } from "../../functions/props.mjs";
import { useContentXHandler } from "../../hooks/content/index.mjs";
import { ScrollView } from "react-native";
import * as React from "react";
import { jsx } from "react/jsx-runtime";

/**
* Horizontal Content component.
*
* Use `ListX` for a list of items.
*/
const ContentX = (props) => {
	const { options: { disabled, plugins }, x: { contentRef, contentType } } = useScrollCore();
	const p = getComponentProps({
		name: "contentX",
		props,
		plugins
	});
	React.useImperativeHandle(p.ref, () => {
		return contentRef.current;
	}, [contentRef]);
	React.useEffect(() => {
		contentType.current = "scrollview";
	}, [contentType]);
	const { onLayout, onContentSizeChange, onScroll } = useContentXHandler({ props: p });
	return /* @__PURE__ */ jsx(ScrollView, {
		...p,
		ref: contentRef,
		showsHorizontalScrollIndicator: p.showsHorizontalScrollIndicator ?? disabled,
		showsVerticalScrollIndicator: false,
		onLayout,
		onContentSizeChange,
		onScroll,
		horizontal: true,
		scrollEventThrottle: p.scrollEventThrottle ?? 5,
		children: p.children
	});
};

export { ContentX };
//# sourceMappingURL=x.mjs.map