Fix Issue 63: custom function when See More pressed (#64)

* feat: + onSeeMoreBlocked prop

* fix: README styling

Co-authored-by: Christopher Fields II <christopherfieldsii@gamestop.com>

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.
 

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);

index.d.ts

@@ -17,6 +17,7 @@ export interface ReadMoreProps extends TextProps {
     debounceSeeMoreCalc?: number;
     onReady?: () => void;
     seeMoreContainerStyleSecondary?: StyleProp<ViewStyle>;
+    onSeeMoreBlocked?: () => void;
 }
 declare const ReadMore: React.FC<ReadMoreProps>;
 export default ReadMore;

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",