🌟v1.0.9 + added custom transition logic

Author: mohit

README.md

@@ -1,7 +1,7 @@
 # ActionSheet-React
 
 [![Size](https://badgen.net/bundlephobia/minzip/actionsheet-react)](https://bundlephobia.com/result?p=actionsheet-react)
-[![npm](https://badgen.net//npm/v/actionsheet-react)](https://bundlephobia.com/result?p=actionsheet-react)
+[![npm](https://badgen.net//npm/v/actionsheet-react)](https://www.npmjs.com/package/actionsheet-react)
 
 An action sheet component for react.
 
@@ -10,8 +10,11 @@ Action Sheet is a component that slides in from bottom and has some list of acti
 
 ### 📺 Demo 
 
-[code-sandbox link](https://codesandbox.io/s/actionsheet-react-2s5zf)
+![demo gif](https://s7.gifyu.com/images/demo_action_sheet.gif)
 
+[code-sandbox simple example](https://codesandbox.io/s/actionsheet-react-2s5zf)
+
+[code-sandbox complex example](https://codesandbox.io/s/actionsheet-react-example-1-0nok0)
 
 ### 📦 Installation
 
@@ -103,19 +106,20 @@ const MyComponent = () => {
 | touchEnable | boolean | if true, the sheet can be swiped down on touch devices |
 | threshold | number | the minimum distance dragged, so that sheet will slide down. Threshold is measured in **px** , default value is 50 |
 | zIndex | number | the default value is **999** |
-| closeOnBgTap | Boolean | if true, the sheet is closed when the backgroud overlay is tapped |
-
+| closeOnBgTap | boolean | if true, the sheet is closed when the backgroud overlay is tapped |
+| sheetTransition | string | css transition shorthand, default value `all 0.3s ease-in-out` |
+| bgTransition | string | css transition shorthand, default value `all 0.5s ease-in-out` |
 
 ### 👾 Misc
 
-1. The logic to stop the backgroud from scrolling is not implemented in this package just to keep it simple. To avoid the background from scrolling you can toggle the overflow property of the body tag, you can also use some other way of your choice
+1. The logic to stop the backgroud from scrolling is not implemented in this package just to keep it simple. To avoid the background from scrolling you can toggle the overflow property of the body tag, or you can also use some other way of your choice
 
 ```javascript
     document.body.style.overflow = 'hidden'
     document.body.style.overflow = 'auto'
 ```
 
-2. Mobile browsers generally have pull-to-refresh and when out bottom sheet is open and user drags the sheet down but eventually the browser detects the swipe down gesture and triggers its pull-to-refresh. To control this behavior in Chrome i did this
+2. Mobile browsers generally have pull-to-refresh and when action sheet is open and when user drags the sheet down the pull-to-refresh is triggered. To control this behavior either you can disable swipe in action sheet `touchEnable={false}` or you can disable pull-to-refresh.
 
 ```css
 body{

build/index.d.ts

@@ -11,6 +11,8 @@ export interface ActionSheetProps {
     opacity?: number;
     zIndex?: number;
     closeOnBgTap?: boolean;
+    bgTransition?: string;
+    sheetTransition?: string;
 }
 export interface ActionSheetRef {
     open(): void;

build/index.es.js

@@ -1,7 +1,7 @@
 {
   "name": "actionsheet-react",
-  "version": "1.0.8",
-  "description": "🌟An awesome react actionsheet component for the web",
+  "version": "1.0.9",
+  "description": "🌟A lightweight and flexible action sheet component for the web",
   "main": "build/index.js",
   "module": "build/index.es.js",
   "jsnext:main": "build/index.es.js",
@@ -31,12 +31,10 @@
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "keywords": [
-    "react",
+    "react panel",
     "actionsheet",
-    "web",
-    "action",
-    "bottom",
-    "sheet"
+    "bottom sheet",
+    "slide up panel"
   ],
   "author": "mohit23x",
   "license": "ISC",

build/index.es.js.map

@@ -12,14 +12,29 @@ export interface ActionSheetProps {
     opacity?: number
     zIndex?: number
     closeOnBgTap?: boolean
+    bgTransition?: string
+    sheetTransition?: string
 }
 
 export interface ActionSheetRef {
     open (): void
     close (): void
 }
 
-const Comp: React.RefForwardingComponent<ActionSheetRef, ActionSheetProps> = (({ onClose, children, sheetStyle, bgStyle, mouseEnable=true, touchEnable=true, threshold=50, opacity=1, zIndex=998, closeOnBgTap=true }, ref):JSX.Element => {
+const Comp: React.RefForwardingComponent<ActionSheetRef, ActionSheetProps> = (({
+    onClose,
+    children,
+    sheetStyle,
+    bgStyle,
+    mouseEnable = true,
+    touchEnable = true,
+    threshold = 50,
+    opacity = 1,
+    zIndex = 998,
+    closeOnBgTap = true,
+    bgTransition = "all 0.5s ease-in-out",
+    sheetTransition="all 0.3s ease-in-out"
+    }, ref): JSX.Element => {
     const [show, setShow] = useState(false);
     const [pressed, setPressed] = useState(false)
     const sheetRef = useRef<HTMLDivElement>(null);
@@ -136,9 +151,9 @@ const Comp: React.RefForwardingComponent<ActionSheetRef, ActionSheetProps> = (({
                 right: 0,
                 bottom: 0,
                 background: "rgba(0, 0, 0, 0.8)",
-                transition: "all 0.5s ease",
                 backfaceVisibility: "hidden",
                 ...bgStyle,
+                transition: bgTransition,
                 opacity: show ? opacity : 0,
                 zIndex: show ? zIndex : -1}}>
         </div>
@@ -156,14 +171,14 @@ const Comp: React.RefForwardingComponent<ActionSheetRef, ActionSheetProps> = (({
                 transform: "translate3d(0, 101%, 0)",
                 ...sheetStyle,
                 zIndex: zIndex + 1,
-                transition: pressed ? "all 0.05s linear" : "all 0.3s ease-in-out" }}
+                transition: pressed ? "all 0.05s linear" : sheetTransition }}
             onMouseDown={mouseEnable? onMouseStart : undefined}
             onMouseMove={mouseEnable? onMouseMove : undefined}
             onMouseUp={mouseEnable ? onSwipeEnd: undefined}
             onTouchStart={touchEnable? onSwipeStart: undefined}
             onTouchMove={touchEnable? onSwipeMove: undefined}
             onTouchEnd={touchEnable? onSwipeEnd: undefined}>
-                {children? children : <div style={{height: 100}} />}
+                {children? children : <div style={{height: 150}} />}
         </div>
         </Fragment>
     )