diff --git a/UNRELEASED.md b/UNRELEASED.md index 2c4a88f56c7..2059fc556d6 100644 --- a/UNRELEASED.md +++ b/UNRELEASED.md @@ -14,6 +14,7 @@ Use [the changelog guidelines](https://git.io/polaris-changelog-guidelines) to f - Track Polaris version information in App Bridge actions - Re-added the navigation’s border-right ([#1096](https://github.com/Shopify/polaris-react/pull/1096)) +- Added `onScrolledToBottom` prop to `Modal` ([#1117](https://github.com/Shopify/polaris-react/pull/1117)) ### Bug fixes diff --git a/src/components/Modal/README.md b/src/components/Modal/README.md index 9e9097f7355..b946dec2bbf 100644 --- a/src/components/Modal/README.md +++ b/src/components/Modal/README.md @@ -620,6 +620,48 @@ class ModalExample extends React.Component { } ``` +### Modal with scroll listener + + + +Use to implement infinite scroll of modal content. + +```jsx +class ModalExample extends React.Component { + state = { + active: true, + }; + + render() { + const {active} = this.state; + + return ( +
+ + alert('Scrolled to bottom')} + > + {Array.from({length: 50}, (_, index) => ( + + +

Item #{index}

+
+
+ ))} +
+
+ ); + } + + toggleModalVisibility = () => { + this.setState(({active}) => ({active: !active})); + }; +} +``` + ### Warning modal