🔧 react-bottom-fixed

!License
!Size
!NPM Downloads

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

``bash
npm install react-bottom-fixed
`

Usage 🚀

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

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

function MyApp() {
return (


`tsx

Fancy Button

`

API Reference 📚

$3

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

$3

- '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:

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

---