react-bottom-fixed

🔧 react-bottom-fixed

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

Before                                                       After

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.

_{Made with ❤️ for better mobile web experience}

Changelog

🚀 [0.2.0] - 2025-06-22

✨ Added

• scrollBehavior prop for customizing scroll behavior
  • fade-out: Fade out CTA on scroll (default)
  • close-keyboard: Close keyboard on scroll
• touchmove event handler to solve iOS Chrome address bar issues
• Vertical scroll detection to prevent CTA hiding on horizontal swipes
• Increased keyboard animation completion wait time from 300ms to 500ms to reduce flickering

🐛 Fixed

• Fixed potential event conflicts when keyboard is hidden instantly
• Improved stability in focusout event handling using requestAnimationFrame

🔧 Improved

• Code cleanup and optimization
• Enhanced example application UI
• Updated documentation and README
• Added preview images

📚 Documentation

• Documented scrollBehavior prop usage
• Improved example code and styling