Thumb Action Dock
A phone bottom bar with Call, Directions and Book — that appears once the hero's CTA has gone, and steps aside for the footer, a focused field and the keyboard.
DOM + CSS0 deps1 file · 11 KB TSX
Props
"use client";
import { useEffect, useRef, useState } from "react";
/**
* A bottom bar for phones with the three things a local business's customers
* actually do: call, get directions, book. It sits where the thumb already is.
*
* IT KNOWS WHEN TO GET OUT OF THE WAY. A dock that is always there doubles up
* with the hero's own Book button, covers the footer's contact details at the
* end of the page, and on iOS floats up over the keyboard and hides the field
* being typed into. So it appears only once the element named by
* revealAfterId (the hero CTA) has scrolled PAST — not merely out of view below
* — hides while the element named by hideWhenId (the footer contact block) is
* on screen, and hides while a text field has focus or the visual viewport has
* shrunk to make room for a keyboard.
*
* HIDDEN MEANS INERT. Sliding a bar off-screen with a transform leaves every
// ---------------------------------------------------------------
// Full source available with a viberdy Pro subscription.
// https://viberdy.dev/pricing
// ---------------------------------------------------------------
}Details
About this component
On a phone, the three things a barber's or restaurant's customers do are call, find the place and book, and a bar at the bottom of the screen puts all three under the thumb. The bar itself is easy; its manners are not. Shown all the time, it doubles up with the hero's own Book button, covers the phone number and address in the footer at the end of the page, and on iOS drifts up over the keyboard and hides the very field being typed into. This dock appears only once the hero's call to action has actually scrolled past — checked against the top of the viewport, since an element still below the fold is also not intersecting — hides while the footer's contact block is visible, and hides while a text field has focus or the visual viewport has shrunk to make room for a keyboard. When it is away it is also inert — set directly on the element, because React 18 silently ignores an inert prop — since a bar pushed off-screen with a transform leaves its links in the tab order. A WhatsApp Message action can be added beside Call, which is how many regulars would rather get in touch. Directions open the platform's maps app, the call link is built from digits only, and the component reserves its own height at the end of the page so nothing is permanently hidden beneath it.
Curator’s note
A sticky 'Book now' bar is the highest-converting thing on a small-business phone site and the most annoying one when it covers the form you are filling in. The difference is four observers.
