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

npm install sticky-ui-component
# or
yarn add sticky-ui-component

🧠 Usage

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

function App() {
  return (
    <div>
      <input type='text' placeholder='Type something...' />
      <StickyComponent style={{ background: 'white', padding: '1rem' }}>
        <button>Submit</button>
      </StickyComponent>
    </div>
  )
}

🧪 API

<StickyComponent />

| 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. |

isStickyReady

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