Set of components to handle modal dialog and popups with redux actions.
- Big changes from 2.x.x. Instead of using HOC to decorate the Popup or Modal containers, I've used render function property to define the view component on the Popup. I believe using render function property makes it easier to define the property that only applies to the component, which makes easier for doing flowtypes and debugging later.
- React v16 only, because it leverages its Portal API)
- For React v15.5 - use version 2.x
- Portal design - benefit of the portal is that you don't have to mess with
z-index. - Auto positioning based on the resize and scrolling events (See Scrolling Section)
- Smart positioning based on the popup content size and available window space
openPopup(id)id: id of the popup to open
closePopup(id)id: id of the popup to close
refreshPopupPosition()- Refresh popup position, such as on scroll. The refreshing is throttled (with
requestAnimationFrame), so that you don't have to throttle in your call.
- Refresh popup position, such as on scroll. The refreshing is throttled (with
-
Modal - creates a modal in the center of the screen with layover, so that nothing can be clicked outside. Must dispatch
closePopupfrom the modal in order to close it- Properties:
id- required idclassName- the modal class namegetPortalElement- optional portal element, or definePortalcomponent elsewhere and let it take care of thislayoverClassName- the layover class namerender- the required render functionstyle- optional styles to apply on the modaltransitionEnterTimeout- enter transition time (defaults to 300ms)transitionExitTimeout- exit transition time (defaults to 300ms)transitionName- the transition name. Defaults tomodal. See Animation for more details. This property directly translates to classNames property from CSSTransition, so you can also use the object to define specific class names.
- Properties:
-
Popup - creates a popup on the location specified in
optionsargument onopenPopup. Clicking outside of the popup should close this popup or with dispatchingclosePopupaction.- Properties:
anchor- [default to 'bottom']bottom|left|right|topclassName- the popup class nameclosePopup- optionally define closePopup handlergetRect- the required function to describe the position that the popup should appear. The return of the function should be same aselement.getBoundingClientRect()object or use that for simplicity. i.e.getRect={() => element.getBoundingClientRect()}getPortalElement- optional portal element, or definePortalcomponent elsewhere and let it take care of thisid- required idrender- the required render functionstyle- optional styles to apply on the popupoffset- the offset distance from the anchored element in pixelstransitionEnterTimeout- enter transition time (defaults to 100ms)transitionExitTimeout- exit transition time (defaults to 100ms)transitionName- the transition name. Defaults topopup. See Animation for more details. This property directly translates to classNames property from CSSTransition, so you can also use the object to define specific class names
- Properties:
-
Portal - this component is where the popup and modal will be rendered to. Or you can define your own portal element and pass that to
Modaland/orPopupcomponents viagetPortalElementproperty.
Portal component basically defines where your modal or popup should be rendering on. So define this below your app root or just below the App component.
import { Portal } from 'react-redux-popup';
render(
<Provider store={store}>
<div>
<App />
<Portal />
</div>
</Provider>
, document.body);Alternatively, you can define your own portal element and assign it to Modal and Popup component. One caveat to this is that this portal element must be defined before the Modal or Popup component gets mounted.
<Popup
getPortalElement={() => document.getElementById('portalRoot')}
/>import { combineReducers, createStore } from 'redux';
import { popupReducer } from 'react-redux-popup';
const reducers = combineReducers({
popup: popupReducer
});
const store = createStore(reducers);import { PureComponent } from 'react-redux-popup';
import { connect } from 'react-redux';
import PopupView from 'popup-view';
// you can connect the view like this, then pass to render prop
const ConnectedView = connect()(PopupView);
let elem;
export default props => (
<div>
<button
onClick={() => props.openPopup('popup1')}
ref={ btn => { elem = btn; }}
>
Open
</button>
<Popup
getRect={() => elem.getBoundingClientRect()}
id="popup1"
render={() => <ConnectedView />}
/>
</div>
);Animation support has been added with ReactTransitionGroup.
To use, you must specify transition enter/exit timeout properties for the components and define css to handle the animation and define the following styles. Note version 2.x had leave for exit transition in accordance with the version of react-transition-group that it was using. The 3.x uses exit to follow the latest version of react-transition-group.
.modal-enter .modal-container {
}
.modal-enter .modal-layover {
}
.modal-enter.modal-enter-active .modal-container {
}
.modal-enter.modal-enter-active .modal-layover {
}
.modal-exit .modal-container {
}
.modal-exit .modal-layover {
}
.modal-exit.modal-exit-active .modal-container {
}
.modal-exit.modal-exit-active .modal-layover {
}
.popup-enter {
}
.popup-enter.popup-enter-active {
}
.popup-exit {
}
.popup-exit.popup-exit-active {
}Scrolling event isn't something that can't be watched from global document, so the solution is to call refreshPopupPosition action to refresh the positions on the popups that are open. Modal doesn't get repositioned from this action.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent