From ae76e3687568ce29d6916e7a6c5bc25b02b7cca4 Mon Sep 17 00:00:00 2001 From: Jordan Hayashi Date: Wed, 3 Aug 2022 15:15:06 -0400 Subject: [PATCH 1/3] Improve the documentation for the useModalize hook --- docs/HOOKS.md | 17 +++++++++++++++-- 1 file changed, 15 insertions(+), 2 deletions(-) diff --git a/docs/HOOKS.md b/docs/HOOKS.md index 7afd159c..74a1165e 100644 --- a/docs/HOOKS.md +++ b/docs/HOOKS.md @@ -1,10 +1,23 @@ # Available hooks -There is a hook available to quickly access Modalize. +There is a hook available to quickly access Modalize. It returns an object with +three keys: + +- `ref`: a ref object to pass to the `Modalize` component +- `open`: a function that opens the `Modalize` component. If you are using + `snapPoint` prop, you can supply a `dest` argument to the `open` + function, to open it to the top directly `open('top')`. You don't have + to provide anything if you want the default behavior. +- `close`: a function that closes the `Modalize` component. You don't need to call + it to dismiss the modal, since you can swipe down to dismiss. + If you are using `alwaysOpen` prop, you can supply a `dest` argument + to the `close` function to reset it to the initial position + `close('alwaysOpen')`, and avoiding to close it completely. ```tsx -import React, { useRef } from 'react'; +import React from 'react'; import { Modalize } from 'react-native-modalize'; +import { useModalize } from 'react-native-modalize/lib/utils/use-modalize'; export const App = () => { const { ref, open, close } = useModalize(); From 60b1a9353e916d0d02dd4c7553e9abb4eefe08ec Mon Sep 17 00:00:00 2001 From: Jordan Hayashi Date: Thu, 4 Aug 2022 10:23:47 -0400 Subject: [PATCH 2/3] Export useModalize from the root --- docs/HOOKS.md | 3 +-- src/index.tsx | 4 +++- 2 files changed, 4 insertions(+), 3 deletions(-) diff --git a/docs/HOOKS.md b/docs/HOOKS.md index 74a1165e..77e597df 100644 --- a/docs/HOOKS.md +++ b/docs/HOOKS.md @@ -16,8 +16,7 @@ three keys: ```tsx import React from 'react'; -import { Modalize } from 'react-native-modalize'; -import { useModalize } from 'react-native-modalize/lib/utils/use-modalize'; +import { Modalize, useModalize } from 'react-native-modalize'; export const App = () => { const { ref, open, close } = useModalize(); diff --git a/src/index.tsx b/src/index.tsx index 62eaa830..d478d413 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -37,6 +37,7 @@ import { import { IProps, TOpen, TClose, TStyle, IHandles, TPosition } from './options'; import { useDimensions } from './utils/use-dimensions'; +import { useModalize } from './utils/use-modalize'; import { getSpringConfig } from './utils/get-spring-config'; import { isIphoneX, isIos, isAndroid } from './utils/devices'; import { isBelowRN65, isRNGH2 } from './utils/libraries'; @@ -1000,4 +1001,5 @@ const ModalizeBase = ( export type ModalizeProps = IProps; export type Modalize = IHandles; -export const Modalize = React.forwardRef(ModalizeBase); +const Modalize = React.forwardRef(ModalizeBase); +export { Modalize, useModalize }; From b157d6b2b3cca76c42d7c8ba2c4dede970a61989 Mon Sep 17 00:00:00 2001 From: Jordan Hayashi Date: Thu, 4 Aug 2022 10:26:09 -0400 Subject: [PATCH 3/3] Autofix --- docs/HOOKS.md | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/docs/HOOKS.md b/docs/HOOKS.md index 77e597df..af35cb03 100644 --- a/docs/HOOKS.md +++ b/docs/HOOKS.md @@ -5,14 +5,14 @@ three keys: - `ref`: a ref object to pass to the `Modalize` component - `open`: a function that opens the `Modalize` component. If you are using - `snapPoint` prop, you can supply a `dest` argument to the `open` - function, to open it to the top directly `open('top')`. You don't have - to provide anything if you want the default behavior. + `snapPoint` prop, you can supply a `dest` argument to the `open` + function, to open it to the top directly `open('top')`. You don't have + to provide anything if you want the default behavior. - `close`: a function that closes the `Modalize` component. You don't need to call - it to dismiss the modal, since you can swipe down to dismiss. - If you are using `alwaysOpen` prop, you can supply a `dest` argument - to the `close` function to reset it to the initial position - `close('alwaysOpen')`, and avoiding to close it completely. + it to dismiss the modal, since you can swipe down to dismiss. + If you are using `alwaysOpen` prop, you can supply a `dest` argument + to the `close` function to reset it to the initial position + `close('alwaysOpen')`, and avoiding to close it completely. ```tsx import React from 'react';