react-floater

What is react-floater?

react-floater is a lightweight and flexible library for creating tooltips, popovers, and guided tours in React applications. It provides a simple API to create floating elements that can be customized and positioned relative to other elements on the page.

What are react-floater's main functionalities?

Tooltip

This feature allows you to create a simple tooltip that appears when the user hovers over the target element. In this example, a tooltip with the text 'This is a tooltip' appears when the user hovers over the button.

import React from 'react';
import Floater from 'react-floater';

const TooltipExample = () => (
  <Floater content="This is a tooltip">
    <button>Hover me</button>
  </Floater>
);

export default TooltipExample;

Popover

This feature allows you to create a popover that can contain more complex content, such as headings and paragraphs. In this example, a popover with a title and content appears when the user clicks the button.

import React from 'react';
import Floater from 'react-floater';

const PopoverExample = () => (
  <Floater content={<div><h4>Popover Title</h4><p>This is a popover content.</p></div>}>
    <button>Click me</button>
  </Floater>
);

export default PopoverExample;

Guided Tour

This feature allows you to create a guided tour with multiple steps. Each step can target a different element on the page and display a tooltip or popover with instructions. In this example, the tour has two steps, each targeting a different element.

import React from 'react';
import Floater from 'react-floater';

const steps = [
  {
    content: 'This is the first step',
    target: '.step1'
  },
  {
    content: 'This is the second step',
    target: '.step2'
  }
];

const GuidedTourExample = () => (
  <div>
    <div className="step1">Step 1</div>
    <div className="step2">Step 2</div>
    <Floater steps={steps}>
      <button>Start Tour</button>
    </Floater>
  </div>
);

export default GuidedTourExample;

Other packages similar to react-floater

react-tooltip

react-tooltip is a popular library for creating tooltips in React applications. It offers a wide range of customization options and supports various positioning strategies. Compared to react-floater, react-tooltip is more focused on tooltips and may not offer the same level of flexibility for creating popovers and guided tours.

react-popper

react-popper is a library that provides a powerful positioning engine for creating tooltips, popovers, and dropdowns in React applications. It is built on top of the Popper.js library and offers advanced positioning capabilities. While react-popper is more powerful in terms of positioning, it may require more configuration compared to react-floater.

react-joyride

react-joyride is a library for creating guided tours in React applications. It provides a comprehensive API for defining tour steps and customizing their appearance. Compared to react-floater, react-joyride is more specialized for creating guided tours and offers more features for managing tour state and behavior.

README

React Floater

Advanced tooltips for React!

View the demo

Highlights

• 🏖 Easy to use: Just set the content
• 🛠 Flexible: Personalize the options to fit your needs
• 🟦 Typescript: Nicely typed

Usage

npm install react-floater

Import it in your app:

import Floater from 'react-floater';

<Floater content="This is the Floater content">
  <span>click me</span>
</Floater>;

And voíla!

Customization

You can use a custom component to render the Floater with the component prop.
Check WithStyledComponents.ts in the demo for an example.

Props

autoOpen boolean ▶︎ false
Open the Floater automatically.

callback (action: 'open' | 'close', props: Props) => void
It will be called when the Floater changes state.

children ReactNode
An element to trigger the Floater.

component ComponentType | ReactElement
A React element or function to use as a custom UI for the Floater.
The prop closeFn will be available in your component.

content ReactNode
The Floater content. It can be anything that can be rendered.
This is required unless you pass a component.

debug boolean ▶︎ false
Log some basic actions.
You can also set a global variable ReactFloaterDebug = true;

disableFlip boolean ▶︎ false
Disable changes in the Floater position on scroll/resize.

disableHoverToClick boolean ▶︎ false
Don't convert the hover event to click on mobile.

event 'hover' | 'click' ▶︎ click
The event that will trigger the Floater.

This won't work in a controlled mode.

eventDelay number ▶︎ 0.4
The amount of time (in seconds) the floater should wait after a mouseLeave event before hiding.

Only valid for event type hover.

footer ReactNode
It can be anything that can be rendered.

getPopper (popper: PopperInstance, origin: 'floater' | 'wrapper') => void
Get the popper.js instance.

hideArrow boolean ▶︎ false
Don't show the arrow. Useful for centered or modal layout.

offset number ▶︎ 15
The distance between the Floater and its target in pixels.

open boolean
The switch between normal and controlled modes.

Setting this prop will disable normal behavior.

modifiers PopperModifiers
Customize popper.js modifiers.

Type Definition

interface PopperModifiers {
  applyStyles?: Partial<ApplyStylesModifier>;
  arrow?: Partial<ArrowModifier>;
  computeStyles?: Partial<ComputeStylesModifier>;
  eventListeners?: Partial<EventListenersModifier>;
  flip?: Partial<FlipModifier>;
  hide?: Partial<HideModifier>;
  offset?: Partial<OffsetModifier>;
  popperOffsets?: Partial<PopperOffsetsModifier>;
  preventOverflow?: Partial<PreventOverflowModifier>;
}

Don't use it unless you know what you're doing

placement Placement ▶︎ bottom
The placement of the Floater. It will update the position if there's no space available.

Type Definition

type Placement = 
| "auto" | "auto-start" | "auto-end"
| "top" | "top-start" | "top-end"
| "bottom" | "bottom-start" | "bottom-end"
| "right"| "right-start" | "right-end"
| "left" | "left-start" | "left-end"
| "center"

portalElement string|HTMLElement
A css selector or element to render the tooltips

showCloseButton boolean ▶︎ false
It will show a ⨉ button to close the Floater.
This will be true when you change the wrapperOptions position.

styles Styles
Customize the UI.

Type Definition

interface Styles {
  arrow: CSSProperties & {
    length: number;
    spread: number;
  };
  close: CSSProperties;
  container: CSSProperties;
  content: CSSProperties;
  floater: CSSProperties;
  floaterCentered: CSSProperties;
  floaterClosing: CSSProperties;
  floaterOpening: CSSProperties;
  floaterWithAnimation: CSSProperties;
  floaterWithComponent: CSSProperties;
  footer: CSSProperties;
  options: {
    zIndex: number;
  };
  title: CSSProperties;
  wrapper: CSSProperties;
  wrapperPosition: CSSProperties;
}

target string | HTMLElement
The target element to calculate the Floater position. It will use the children as the target if it's not set.

title ReactNode
It can be anything that can be rendered.

wrapperOptions WrapperOptions
Position the wrapper relative to the target.
You need to set a target for this to work.

Type Definition

interface WrapperOptions {
  offset: number; // The distance between the wrapper and the target. It can be a negative value.
  placement: string; // the same options as above, except center
  position: bool; // Set to true to position the wrapper
}

Styling

You can customize everything with the styles prop.
Only set the properties you want to change, and the default styles will be merged.

Check the styles.ts for the syntax.

Modes

Default
The wrapper will trigger the events and use itself as the Floater's target.

<Floater content="This is the Floater content">
  <span>click me</span>
</Floater>

Proxy
The wrapper will trigger the events, but the Floater will use the target prop to position itself.

<div className="App">
  <img src="some-path" />

  <Floater content="This is the Floater content" target=".App img">
    <span>click me</span>
  </Floater>
</div>

Beacon
It is the same as the proxy mode, but the wrapper will be positioned relative to the target.

<div className="App">
  <img
    src="https://upload.wikimedia.org/wikipedia/commons/2/2d/Google-favicon-2015.png"
    width="100"
    className="my-super-image"
  />

  <Floater
    content="This is the Floater content"
    target=".my-super-image"
    wrapperOptions={{
      offset: -22,
      placement: 'top',
      position: true,
    }}
  >
    <span style={{ color: '#f04', fontSize: 34 }}>◉</span>
  </Floater>
</div>

Controlled
Setting a boolean to the open prop will enter the controlled mode and not respond to events.
In this mode, you don't even need to have children

<div className="App">
  <img src="some-path" />
  <Floater content="This is the Floater content" open={true} target=".App img" />
</div>