StickyComponent

A lightweight React component for mobile web apps that keeps UI elements "sticky" above the on-screen keyboard using the visualViewport API.

✨ Features

- Automatically adjusts position when the on-screen keyboard appears.
- Uses visualViewport for accurate height calculations.
- Minimal and easy to integrate.
- Compatible with SSR (no window usage on the server).

📦 Installation

``bash
npm install sticky-ui-component


or


yarn add sticky-ui-component
`

🧠 Usage

`tsx
import React from 'react'
import { StickyComponent } from 'sticky-ui-component'

function App() {
return (



)
}
`

🧪 API

$3

| Prop | Type | Description |
| ----------- | -------------------------------- | ---------------------------------------------- |
| children | React.ReactNode | Content to render inside the sticky container. |
| className | string (optional) | Optional CSS class for styling. |
| style | React.CSSProperties (optional) | Inline styles for the container. |

$3

A boolean flag you can use to check whether the sticky logic has initialized (e.g., for conditional rendering or logging).

⚙️ How It Works

The component listens for resize and scroll events on visualViewport to calculate how much space the on-screen keyboard takes. It then offsets the component’s position accordingly to keep it visible above the keyboard.

🧩 Use Cases

- Fixed footers or buttons that need to stay visible when typing.
- Chat input fields in messaging apps.
- Form submission buttons.

📱 Compatibility

This component depends on visualViewport, which is widely supported in modern mobile browsers. It gracefully does nothing if unsupported.

🛠️ Limitations

- May not work as expected in older browsers or inside iframes.
- Currently positions the element using position: absolute` — ensure it's inside a relatively positioned container.

📃 License

MIT