feat: expose 'as' and 'style' props

README.md

@@ -51,7 +51,7 @@ import {RemoveScroll} from 'react-remove-scroll';
 - `[allowPinchZoom=false]` - enabled "pinch-n-zoom" behavior. By default it might be prevented. However - pinch and zoom might break "scroll isolation", and __disabled by default__.
 - `[noIsolation=false]` - disables outer event capturing. Event capturing is React friendly and unlikely be a problem.
 But if you are using _shadowbox_ of some sort - you dont need it.
-- `[inert=false]` - ☠️(be careful) disables events the rest of page completely using `pointer-events` expect the Lock(+shard). 
+- `[inert=false]` - ☠️(be careful) disables events the rest of page completely using `pointer-events` except the Lock(+shards). 
 React portals not friendly, might lead to production issues. Enable only for __rare__ cases, when you have to disable scrollbars somewhere on the page(except body, Lock and shards). 
 - `[forwardProps]` - will forward all props to the `children`
 - `[className]` - className for an internal div

__tests__/UI.tsx

@@ -16,16 +16,31 @@ describe('UI', () => {
  <RemoveScroll sideCar={car}>content</RemoveScroll>
  );
  await tick();
- expect(wrapper.html()).toContain('content');
+ expect(wrapper.html()).toBe('<div>content</div>');
+ });
+
+ it('smoke as style class', async () => {
+ const wrapper = mount(
+ <RemoveScroll
+ sideCar={car}
+ as="span"
+ style={{width:'auto'}}
+ className="name"
+ >
+ content
+ </RemoveScroll>
+ );
+ await tick();
+ expect(wrapper.html()).toBe('<span style="width: auto;" class="name">content</span>');
  });
 
  it('forward', async () => {
  const wrapper = mount(
  <RemoveScroll sideCar={car} forwardProps>
- <div>content</div>
+ <span>content</span>
  </RemoveScroll>
  );
  await tick();
- expect(wrapper.html()).toContain('content');
+ expect(wrapper.html()).toBe('<span>content</span>');
  });
 });

src/SideEffect.tsx

@@ -81,7 +81,7 @@ export function RemoveScrollSideCar(props: IRemoveScrollEffectProps) {
  'deltaY' in event ? event.deltaY : touchStart[1] - touch[1];
 
  let currentAxis: Axis | undefined;
- let target: HTMLElement = event.target as any;
+ const target: HTMLElement = event.target as any;
 
  const moveDirection: Axis =
  Math.abs(deltaX) > Math.abs(deltaY) ? 'h' : 'v';
@@ -128,7 +128,7 @@ export function RemoveScrollSideCar(props: IRemoveScrollEffectProps) {
  cancelingAxis,
  parent,
  event,
- cancelingAxis == 'h' ? deltaX : deltaY,
+ cancelingAxis === 'h' ? deltaX : deltaY,
  true
  );
  },

src/UI.tsx

@@ -17,6 +17,9 @@ const nothing = () => {
  return;
 };
 
+/**
+ * Removes scrollbar from the page and contain the scroll within the Lock
+ */
 const RemoveScroll: RemoveScrollUIType = React.forwardRef<
  HTMLElement,
  IRemoveScrollUIProps
@@ -42,16 +45,18 @@ const RemoveScroll: RemoveScrollUIType = React.forwardRef<
  noIsolation,
  inert,
  allowPinchZoom,
+ as: Container = 'div',
  ...rest
  } = props;
 
  const SideCar: SideCarComponent<IRemoveScrollEffectProps> = sideCar;
 
+ const containerRef = useMergeRefs<any>([
+ ref,
+ parentRef as React.MutableRefObject<HTMLElement>
+ ]);
+
  const containerProps = {
- ref: useMergeRefs<any>([
- ref,
- parentRef as React.MutableRefObject<HTMLElement>
- ]),
  ...rest,
  ...callbacks
  };
@@ -73,12 +78,12 @@ const RemoveScroll: RemoveScrollUIType = React.forwardRef<
  {forwardProps ? (
  React.cloneElement(
  React.Children.only(children as React.ReactElement),
- containerProps
+ { ...containerProps, ref:containerRef}
  )
  ) : (
- <div {...containerProps} className={className}>
+ <Container {...containerProps} className={className} ref={containerRef}>
  {children}
- </div>
+ </Container>
  )}
  </React.Fragment>
  );

src/handleScroll.ts

@@ -89,8 +89,7 @@ export const handleScroll = (
  (targetInLock && (endTarget.contains(target) || endTarget === target))
  );
 
- if (0) {
- } else if (
+ if (
  isDeltaPositive &&
  ((noOverscroll && availableScroll === 0) ||
  (!noOverscroll && delta > availableScroll))

src/types.tsx

@@ -14,25 +14,67 @@ export interface RemoveScrollEffectCallbacks {
 }
 
 export interface ChildrenNode {
+ /**
+ * if forwardProps is false - children should be ReactNode
+ * and it would be wrapper with a div
+ * @see {@link IRemoveScrollSelfProps.as}
+ */
  forwardProps?: false;
  children: React.ReactNode;
 }
 
 export interface ChildrenForward {
+ /**
+ * if forwardProps is true - children should be single Element
+ * which would NOT with a div
+ * @see {@link IRemoveScrollSelfProps.as}
+ */
  forwardProps: true;
  children: React.ReactElement;
 }
 
 export interface IRemoveScrollSelfProps {
+ /**
+ * disables "event isolation" (suppressing of events happening outside of the Lock)
+ * @default false
+ */
  noIsolation?: boolean;
+ /**
+ * enabled complete Lock isolation using `pointer-events:none` for anything outside the Lock
+ * you probably don't need it, except you do
+ * @default false
+ * @see {IRemoveScrollSelfProps.noIsolation}
+ */
  inert?: boolean;
+ /**
+ * allows pinch-zoom, however might work not perfectly for normal scroll
+ */
  allowPinchZoom?: boolean;
 
+ /**
+ * switches on/off the behavior of the component
+ */
  enabled?: boolean;
- className?: string;
+
+ /**
+ * Controls the body scroll bar removal
+ * @default false
+ */
  removeScrollBar?: boolean;
 
+
+ className?: string;
+ style?: React.CSSProperties;
+
+ /**
+ * array of refs to other Elements, which should be considered as a part of the Lock
+ */
  shards?: Array<React.RefObject<any> | HTMLElement>;
+ /**
+ * Control host node used for the lock.
+ * @default 'div'
+ */
+ as?: string | React.ElementType;
 }
 
 export type IRemoveScrollProps = IRemoveScrollSelfProps &