useHapticsSettings
Read and flip the app-wide haptics switch that
useHaptics, and every component built on it such as Button, Toast and Wheel, obeys: enabled, setEnabled(on) and temporarilyDisable(ms). PlocksProvider mounts the HapticsProvider it reads from; useOptionalHapticsSettings returns undefined instead of throwing when there is none.useHaptics fires the feedback and useHapticsSettings gates it: while enabled is false every useHaptics call is a no-op, including the press feedback built into Button, so one switch in a settings screen silences the whole library. temporarilyDisable(ms) turns haptics off for ms, then restores the previous setting, which suits a burst of programmatic changes that shouldn't buzz. Set the starting state with <PlocksProvider haptics={{ defaultEnabled: false }}>, or pass haptics={false} to leave the provider out. Haptics only play on iOS and Android with expo-haptics installed, so on web the switch changes nothing you can feel.Loading demo…
import { Block, Button, Row, Switch, useHaptics, useHapticsSettings } from '@plocks/ui';
export function Demo() {
const { enabled, setEnabled, temporarilyDisable } = useHapticsSettings();
const { notifySuccess } = useHaptics();
return (
<Block align="flex-start">
<Switch label="Haptics" checked={enabled} onChange={setEnabled} />
<Row gap="sm" wrap="wrap">
<Button onPress={notifySuccess}>Buzz</Button>
<Button variant="outline" disabled={!enabled} onPress={() => temporarilyDisable(3000)}>
Pause 3s
</Button>
</Row>
</Block>
);
}React Native design for iOS, Android, and Web.
Quick Links
Resources