🔧 react-bottom-fixed

A smart React component that keeps your bottom buttons visible even when the iOS keyboard appears

Why does this exist? 🤔

If you've ever built mobile web apps, you've probably experienced this frustration:

• Buttons disappear behind the keyboard on iPhone 😭
• CSS position: fixed doesn't work properly on iOS Safari/Chrome
• Important action buttons get hidden every time users start typing

This library solves exactly that problem! While Android fixed this issue back in 2019, iOS still hasn't caught up.

How does it work? ✨

It automatically adjusts your button position in real-time whenever the keyboard appears:

• Uses the visualViewport API to calculate exact keyboard height
• Smoothly moves buttons up using transform (no reflow!)
• Fades buttons slightly during scrolling to avoid blocking content

Installation 📦

npm install react-bottom-fixed

Usage 🚀

Super simple! Just wrap your bottom button with BottomFixed and you're done:

import { BottomFixed } from 'react-bottom-fixed';

function MyApp() {
  return (
    <div>
      {/* Regular page content */}
      <h1>Hello World!</h1>
      <input type="text" placeholder="Try typing here" />

      {/* Button that stays visible above keyboard */}
      <BottomFixed>
        <button onClick={() => alert('Done!')}>Complete</button>
      </BottomFixed>
    </div>
  );
}

Custom styling? ✨

<BottomFixed className="my-custom-style">
  <button className="fancy-button">Fancy Button</button>
</BottomFixed>

API Reference 📚

BottomFixed Props

| Property | Type | Required | Description | | ---------------- | -------------------------------- | -------- | --------------------------------------------------------- | | children | ReactNode | ✅ | Component to be fixed at bottom | | className | string | ❌ | Additional CSS class name | | scrollBehavior | 'fade-out' \| 'close-keyboard' | ❌ | Controls behavior when user scrolls during keyboard input |

scrollBehavior Options

• 'fade-out' (default): Button fades out when user scrolls to avoid blocking content
• 'close-keyboard': Automatically closes the keyboard when user starts scrolling

Browser Support 🌐

• ✅ iOS Safari (main target!)
• ✅ iOS Chrome
• ✅ Android browsers (works great already, but compatibility guaranteed)
• ✅ Desktop (works as regular container)

On non-iOS environments, it automatically behaves like a normal container with zero performance overhead.

Try the Demo 👀

🌐 Live Demo - Try it right now!

Or clone and run locally:

git clone https://github.com/almond-bongbong/react-bottom-fixed.git
cd react-bottom-fixed/example
npm install
npm run dev

Test it on iPhone or Chrome DevTools mobile mode – you'll see the difference immediately!

Important Notes ⚠️

• iOS-only optimization: No extra logic runs on non-iOS devices
• Requires visualViewport: Gracefully falls back to regular container on older browsers
• Performance-first: Built with GPU acceleration for smooth animations

Contributing 🤝

Found a bug or have ideas for improvement? We'd love to hear from you!

• 🐛 Report bugs
• 💡 Request features

License 📄

MIT License - feel free to use it however you like!

Changelog 📝

See the CHANGELOG.md file for details.