import { useFreezeScroll } from 'ahooks';
import React, { useState } from 'react';

export default () => {
  const [isActive, setIsActive] = useState(false);
  useFreezeScroll(isActive);

  return (
      <div style={{ height: '300px' }}>
        <div style={{ height: '5000px' }}>
          <div style={{ marginTop: '20px' }}>
            <p>Scroll should be frozen when enabled.</p>
            <p>Try scrolling to test the effect.</p>
          </div>
          <button onClick={() => setIsActive(!isActive)} style={{ position: 'sticky', top: '100px' }}>
            {isActive ? 'Disable Freeze Scroll' : 'Enable Freeze Scroll'}
          </button>
        </div>
      </div>
  );
};