website·Indexed 29 days ago
https://react-beacon-hint-doc.vercel.app/A React library for creating beacons and hints to guide users through an interface. It includes components such as Hint, Beacon (FillBeacon, OutlineBeacon), Popover, and Floating, providing tools for installation, usage, and API integration.
<Hint> component.Hint component is used to display a popover when a user hovers over or clicks a beacon, serving as a guide for application users. It wraps a trigger element (such as a Button) and takes a popover string for the message and a hit count to track or trigger the hint.<Hint popover="Hello World" hit={1}>
<Button>Hover Me</Button>
</Hint>react-beacon-hint package and its required peer dependency @floating-ui/react (which handles anchor positioning) using your preferred package manager.# Install the main library
npm install react-beacon-hint
# Install the required dependency
npm install @floating-ui/reactVisit the official playground on CodeSandbox:
https://codesandbox.io/p/github/moh3n9595/react-beacon-hint/mainConfigure the visual elements of the hint:
beacon ("fill" | "outline" | ReactElement, default: "outline"): The style of the beacon indicator.popover (string | ReactElement): The content displayed when the beacon is active.beaconProps (Object): Configuration for the floating beacon. Includes autoOffset (boolean, default: true).popoverProps (Object): Configuration for the floating popover. Default includes an enabled arrow with specific dimensions and disabled hover props.index.js or main.tsx).import 'react-beacon-hint/styles.css'Floating component is a NamedExoticComponent that accepts FloatingProps and RefAttributes for FloatingRef. Key props include floatingComponent for the element to be floated, placement for positioning, and open/setOpen for visibility state management.style property accepts a CSSProperties object, allowing for direct inline style overrides on the beacon element.// Example usage
<Beacon style={{ marginTop: '10px' }} />open property is a boolean that determines whether the floating component is currently visible (open) or hidden.<Floating open={true} />Hint component and provide the text to display in the popover prop. You must import the accompanying CSS styles for the hint to render correctly.import {Hint} from 'react-beacon-hint';
import 'react-beacon-hint/styles.css';
const Component = () => {
return (
<Hint popover='Yay! I appeared!'>
<button>Click The Hint</button>
</Hint>
);
};setOpen method on the FloatingRef to manually change whether the floating component is visible. It accepts a boolean open parameter.floatingRef.current?.setOpen(true);color property accepts a string to define the color of the beacon.// Example usage
<Beacon color="red" />