@choi2021/react-native-use-modal
v1.0.0
Published
hooks for the react native modal
Downloads
3
Readme
react-native-use-modal
A way to create modals that are easily reusable, encapsulated, and handle the results.
The goal of react-native-use-modal
is to make all the functions of react-native-modal
available and convenient to use at the same time.
Feature
- Show modal and get result as promise
- Easy to show multiple modal continuously
- Pass parameters to modal when call
show
- Get result data from modal when hide (as promise)
- modal encapsulation
- No need to explicitly place modal at component tree
- Fully customizable
Table of Contents
- Installation
- Usage
- Declare modal as hook with
createUseModal
- Show modal using hook
- Handling the modal's result
- Declare modal that require parameters
- Show modal that require parameters
- Declare modal that return values
- Handling the modal's result with value
- Customize modal config
- Make cancelable when press backdrop or back button
- Creating a preconfigured createUseModal
- Making a third-party modal or an existing modal into a 'hook'
- Declare modal as hook with
- Workflow example
- Contributing
- License
Installation
yarn add react-native-use-modal
# or
npm i react-native-use-modal
Place ModalProvider
at your app's root component
// App.tsx
import {ModalProvider} from 'react-native-use-modal';
const App = () => {
return <ModalProvider>
// ...
</ModalProvider>;
};
If you are already using a different provider, make the ModalProvider
a child of the other provider.
Otherwise, the modal will not get the values broadcast by other providers.
import {Provider} from 'react-redux';
const App = () => {
return (
<Provider store={store}>
<FooProvider>
<BarProvider>
<ModalProvider>
// ...
</ModalProvider>
</BarProvider>
</FooProvider>
</Provider>
);
};
Usage
Declare modal as hook with createUseModal
createUseModal
function receives a functional component of the specified type as the first argument.
This component will later be displayed as a modal.
// useSimpleModal.tsx
import {createUseModal} from 'react-native-use-modal';
// createUseModal creates a hook and returns it.
const useSimpleModal = createUseModal(
({
confirm, // Call this function to finish (confirm) modal
cancel, // Call this function to finish (cancel) modal
}) => {
// return react node to show as modal
return (
<View>
/* any view to presentation */
<Button onPress={confirm}>Ok</Button>
<Button onPress={cancel}>Cancel</Button>
</View>
);
},
);
Show modal using hook
..from any other react component
// FooView.tsx
const FooView = () => {
// Call the hook you declared earlier
// By calling the hook created with createUseModal, you can get an object that can display modal.
const simpleModal = useSimpleModal();
const handlePressButton = () => {
// Show modal!
// This returns a Promise<ModalResult>
simpleModal.show();
};
};
Handling the modal's result
You can wait for modal to return the result with await
// FooView.tsx
const handlePressButton = async () => {
// Show modal!
// This returns a Promise<ModalResult>
const result = await simpleModal.show();
if (result.type === ModalResultType.CONFIRM) {
// handle confirm here
// ...
} else {
// handle cancel here
// ...
}
};
Declare modal that require parameters
We sometimes need parameters to configure the modal.
createUseModal
receives two generic types, the first is the type of data to be included in the result of modal, and the second is the type of parameter passed when calling modal.
If not used, just declare it as void type. The default is void.
// useAlertModal.tsx
import {createUseModal} from 'react-native-use-modal';
const useAlertModal = createUseModal<
void, // Result data type. In this case it is not used, so it is void.
{title: string; message: string} // Parameters type
>(({confirm, cancel, param}) => { // Parameters are passed in props
return (
<View>
<Title>{param.title}</Title>
<Paragraph>{param.message}</Paragraph>
<View>
<Button onPress={confirm}>Ok</Button>
<Button onPress={cancel}>Cancel</Button>
</View>
</View>
);
});
Show modal that require parameters
// BarView.tsx
const BarView = () => {
// Call the hook you declared earlier
const alertModal = useAlertModal();
const handlePressButton = () => {
// Show modal!
// This returns a Promise<ModalResult>
alertModal.show({
title: 'Title',
message: 'Message',
});
};
};
Declare modal that return values
Sometimes we may want to return a result from Modal.
// Pass the result data type as the first Generic argument.
// In this case, no parameters are used, so the second generic argument does not need to be passed.
// Now, the confirm function passed as props receives the value of the data type declared as generic.
export const useTextInputModal = createUseModal<string>(({confirm, cancel}) => {
const [value, setValue] = useState('');
const handlePressConfirm = () => confirm(value);
return (
<View style={styles.container}>
<TextInput
value={value}
onChangeText={setValue}
/>
<View >
<Button onPress={handlePressConfirm}>Confirm</Button>
<Button onPress={cancel}>Cancel</Button>
</View>
</View>
);
});
Handling the modal's result with value
// BazView.tsx
const BazView = () => {
const textInputModal = useTextInputModal();
const handlePressButton = async () => {
// Show modal!
// This returns a Promise<ModalResult<string>>
const result = await textInputModal.show();
if (result.type === ModalResultType.CONFIRM) {
// handle confirm here
// You can find the entered value in result
console.log('entered: ' + result.data);
} else {
// handle cancel here
// ...
}
};
};
Customize modal config
This package depends on react-native-modal
and accept all its props.
You can set this in the second argument of the createUseModal
.
For example, an animation could be set up like this:
export const useSimpleModal = createUseModal(
({confirm, cancel}) => {
/* render here */
},
{
modalProps: {
animationIn: 'fadeIn',
animationOut: 'fadeOut',
},
},
);
createUseModal
supports all props, except for the isVisible
property. We internally manage this property.
Make cancelable when press backdrop or back button
With these option, modal will cancel when press backdrop or back button. Each option can be set independently.
export const useSimpleModal = createUseModal(
({confirm, cancel}) => {
/* render here */
},
{
cancelOnBackButtonPress: true, // Default is false
cancelOnBackdropPress: true, // Default is false
},
);
Creating a preconfigured createUseModal
You can use the createCreateUseModal
function to create createUseModal with predefined options.
For example, if you need to create several bottom sheet modal, you can use it in a way such as defining the modalOption value for creating a bottom sheet modal in advance.
An example usage can be found at create-use-bottom-sheet-modal.tsx.
Making a third-party modal or an existing modal into a 'hook'
Using createUseForwardedModal
, You can make a normal modal (modal that receives the visible property as props) a 'hook'.
It can be used when you want to make a modal component provided by the design component library into a 'hook' or to make an existing modal component into a 'hook' with minimal effort.
An example usage can be found at forwarded-alert-modal-example-screen.tsx.
Workflow example
You can clone this project and test examples by running the following command:
# iOS
yarn && yarn example ios
# Android
yarn && yarn example android
Examples provided are:
Contributing
See the contributing guide to learn how to contribute to the repository and the development workflow.
License
MIT