diff --git a/package.json b/package.json index 73deb35b..ea1c6afe 100644 --- a/package.json +++ b/package.json @@ -23,7 +23,7 @@ }, "size-limit": [ { - "limit": "1.875 KB", + "limit": "1.891 KB", "path": "es/index.js" } ], diff --git a/src/index.js b/src/index.js index 0ffeb07e..e6c7e380 100644 --- a/src/index.js +++ b/src/index.js @@ -219,6 +219,22 @@ export function useSwipeable(props) { return handlers } +const reservedProps = { + delta: true, + innerRef: true, + nodeName: true, + onSwiped: true, + onSwipedDown: true, + onSwipedLeft: true, + onSwipedRight: true, + onSwipedUp: true, + onSwiping: true, + preventDefaultTouchmoveEvent: true, + rotationAngle: true, + trackMouse: true, + trackTouch: true +} + export class Swipeable extends React.PureComponent { static propTypes = { onSwiped: PropTypes.func, @@ -248,10 +264,16 @@ export class Swipeable extends React.PureComponent { } render() { - const { className, style, nodeName = 'div', innerRef, children, trackMouse } = this.props + const { nodeName = 'div', innerRef, children, trackMouse } = this.props + const otherProps = {} + for (const prop in this.props) { + if (!reservedProps[prop]) { + otherProps[prop] = this.props[prop] + } + } const [handlers, attachTouch] = getHandlers(this._set, { trackMouse }) this.transientState = updateTransientState(this.transientState, this.props, attachTouch) const ref = innerRef ? el => (innerRef(el), handlers.ref(el)) : handlers.ref - return React.createElement(nodeName, { ...handlers, className, style, ref }, children) + return React.createElement(nodeName, { ...otherProps, ...handlers, ref }, children) } } diff --git a/types/index.d.ts b/types/index.d.ts index aae9b4c5..6c610d96 100644 --- a/types/index.d.ts +++ b/types/index.d.ts @@ -35,12 +35,10 @@ export interface SwipeableOptions { } // Component Specific Props -export interface SwipeableProps { +export interface SwipeableProps extends React.HTMLProps { nodeName?: string innerRef?: (element: HTMLElement | null) => void children?: React.ReactNode - style?: React.CSSProperties - className?: string } export interface SwipeableHandlers { diff --git a/types/test.tsx b/types/test.tsx index 9b3c17a9..9a5e1b16 100644 --- a/types/test.tsx +++ b/types/test.tsx @@ -32,6 +32,7 @@ class SampleComponent extends React.PureComponent { innerRef={() => {}} style={{ backgroundColor: 'blue' }} className="classname" + aria-hidden={false} >
This element can be swiped