useVisibility
Decide whether your own component should render from the visibility props every library component accepts:
hiddenFrom and visibleFrom (breakpoints) and lightHidden and darkHidden (color scheme).Two of the four tags render at any time: one per breakpoint rule, one per color scheme.
useVisibility(props) returns false when hiddenFrom="md" and the viewport is md or wider, when visibleFrom="md" and it is narrower, or when lightHidden / darkHidden matches the current scheme; a hidden component should return null rather than hide with styles. Components built with factory (every library component) already handle these props, so the hook is for components you write yourself. It only subscribes to the viewport while hiddenFrom or visibleFrom is set, and static rendering assumes the xl breakpoint until hydration.Loading demo…
import type { ReactNode } from 'react';
import { Badge, Row, useVisibility } from '@plocks/ui';
import type { VisibilityProps } from '@plocks/ui';
type TagProps = VisibilityProps & { children: ReactNode };
function Tag({ children, ...visibility }: TagProps) {
const visible = useVisibility(visibility);
if (!visible) return null;
return <Badge size="lg">{children}</Badge>;
}
export function Demo() {
return (
<Row gap="sm">
<Tag hiddenFrom="md">Below md</Tag>
<Tag visibleFrom="md">md and up</Tag>
<Tag darkHidden>Light scheme</Tag>
<Tag lightHidden>Dark scheme</Tag>
</Row>
);
}React Native design for iOS, Android, and Web.
Quick Links
Resources