diff --git a/README.md b/README.md index e70d333..a2d7105 100644 --- a/README.md +++ b/README.md @@ -76,6 +76,7 @@ export default Home; | `onCollapse` | `func` | no | optional callback executed when collapsed | `onReady` | `func` | no | optional callback executed when see more placement measurements are completed | `seeMoreContainerStyleSecondary` | `object` | no | Incase of text overlap, pass { position: 'relative' } see [issue](https://github.com/fawaz-ahmed/react-native-read-more/issues/52) (not recommended) +| `onSeeMoreBlocked` | `func` | no | when a function is passed, will disable the default See More toggling and use the custom callback instead. Useful to do things like open a modal instead of expanding text when See More is pressed. Any additional props are passed down to underlying `Text` component. diff --git a/example/src/ReadMore.js b/example/src/ReadMore.js index ac79d56..857bf71 100644 --- a/example/src/ReadMore.js +++ b/example/src/ReadMore.js @@ -43,6 +43,7 @@ const ReadMore = ({ debounceSeeMoreCalc, onReady, seeMoreContainerStyleSecondary, + onSeeMoreBlocked, ...restProps }) => { const [additionalProps, setAdditionalProps] = useState({}); @@ -180,8 +181,13 @@ const ReadMore = ({ ); const toggle = useCallback(() => { - setCollapsed(prev => !prev); - }, [setCollapsed]); + if (onSeeMoreBlocked) { + onSeeMoreBlocked(); + } + else { + setCollapsed(prev => !prev); + } + }, [setCollapsed, onSeeMoreBlocked]); const updateLineOfImpact = useCallback( (_text = '', resetCollapsedChildren = true) => { @@ -692,6 +698,7 @@ ReadMore.propTypes = { debounceSeeMoreCalc: PropTypes.number, onReady: PropTypes.func, seeMoreContainerStyleSecondary: PropTypes.object, + onSeeMoreBlocked: PropTypes.func, }; ReadMore.defaultProps = { @@ -716,6 +723,7 @@ ReadMore.defaultProps = { }), onReady: () => {}, seeMoreContainerStyleSecondary: {}, + onSeeMoreBlocked: undefined, }; export default memo(ReadMore); diff --git a/index.d.ts b/index.d.ts index 6d3b77f..fc0a466 100644 --- a/index.d.ts +++ b/index.d.ts @@ -17,6 +17,7 @@ export interface ReadMoreProps extends TextProps { debounceSeeMoreCalc?: number; onReady?: () => void; seeMoreContainerStyleSecondary?: StyleProp; + onSeeMoreBlocked?: () => void; } declare const ReadMore: React.FC; export default ReadMore; \ No newline at end of file diff --git a/package.json b/package.json index a873f6e..4675cd5 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@fawazahmed/react-native-read-more", - "version": "2.3.5", + "version": "2.3.6", "description": "A simple react native library to show large blocks of text in a condensed manner with the ability to collapse and expand.", "main": "dist/index.js", "types": "index.d.ts",