How do I make the content behind the modal functional?

Question

I want to implement a bottom sheet button but I want the content behind it to be able to be manipulated without the bottom sheet closing.

I'm trying to use IonModal but it doesn't allow me to. I also tried using react-spring-bottom but it gave me implementation problems with ionic. Any alternatives?

Answer 1

I created a reusable solution using React Spring for smooth animations which you can find below:

import React, { useState } from 'react';
import { useSpring, animated } from 'react-spring';

const PersistentBottomSheet = ({ children, minHeight = 100, maxHeight = 400 }) => {
  const [isExpanded, setIsExpanded] = useState(false);
  
  const springProps = useSpring({
    height: isExpanded ? maxHeight : minHeight,
    config: {
      tension: 300,
      friction: 30
    }
  });

  return (
    <div className="fixed inset-x-0 bottom-0 z-50">
      <animated.div 
        style={springProps}
        className="bg-white rounded-t-xl shadow-lg w-full overflow-hidden"
      >
        {/* Handle bar for dragging */}
        <div 
          className="w-full py-4 cursor-pointer"
          onClick={() => setIsExpanded(!isExpanded)}
        >
          <div className="w-12 h-1 bg-gray-300 rounded-full mx-auto" />
        </div>
        
        {/* Content area */}
        <div className="px-4 overflow-y-auto">
          {children}
        </div>
      </animated.div>
    </div>
  );
};

// Example usage
const ExampleApp = () => {
  return (
    <div className="h-screen bg-gray-100">
      {/* Your main content here */}
      <div className="p-4">
        <h1 className="text-xl font-bold">Main Content</h1>
        <p>This content remains interactive when the bottom sheet is open</p>
      </div>
      
      <PersistentBottomSheet>
        <div className="space-y-4">
          <h2 className="text-lg font-semibold">Bottom Sheet Content</h2>
          <p>This is the content of your bottom sheet.</p>
          <button className="bg-blue-500 text-white px-4 py-2 rounded">
            Action Button
          </button>
        </div>
      </PersistentBottomSheet>
    </div>
  );
};

export default ExampleApp;

To use this component:

Install React Spring if you haven't already:

npm install @react-spring/web

Copy the component code and use it in your application

You can customize the styling using Tailwind classes or your preferred styling solution

Hope this helps