wc-react - npm Package Compare versions

Comparing version 0.4.0 to 0.5.0

dist/esm/index.d.ts

 export * from './Wc';

dist/esm/index.js

 export * from './Wc';
 //# sourceMappingURL=index.js.map

dist/esm/Wc.d.ts

@@ -7,2 +7,3 @@ import React, { Component } from 'react';
     wcType: string | Function;
+    innerRef: React.Ref<unknown>;
 };
@@ -108,2 +109,2 @@ /**
  */
-export declare const wrapWc: <T = WcProps>(tag: TimerHandler) => React.FC<T & React.HTMLAttributes<any>>;
+export declare const wrapWc: <T = WcProps>(tag: string | Function) => React.ForwardRefExoticComponent<React.PropsWithoutRef<T & React.HTMLAttributes<any>> & React.RefAttributes<unknown>>;

dist/esm/Wc.js

@@ -73,2 +73,10 @@ /* eslint-disable @typescript-eslint/explicit-function-return-type */
         }
+        if (this.props.innerRef) {
+            if (typeof this.props.innerRef === 'function') {
+                this.props.innerRef(element);
+            }
+            else {
+                this.props.innerRef.current = element;
+            }
+        }
     }
@@ -198,6 +206,7 @@ /**
  */
+// eslint-disable-next-line @typescript-eslint/ban-types
 export const wrapWc = (tag) => {
-    const component = (props) => React.createElement(Wc, Object.assign({ wcType: tag }, props));
+    const component = React.forwardRef((props, ref) => React.createElement(Wc, Object.assign({ wcType: tag, innerRef: ref }, props)));
     return component;
 };
 //# sourceMappingURL=Wc.js.map

package.json

 {
   "name": "wc-react",
-  "version": "0.4.0",
+  "version": "0.5.0",
   "description": "Web Components wrapper class for React",
@@ -5,0 +5,0 @@ "author": "metulev",

readme.md

@@ -69,2 +69,34 @@ # React wrapper for web components
 
+## Refs
+
+Wrapped components support passing a `ref` which will get a reference to the underlying web component.
+
+Example with `useRef`:
+
+```jsx
+const App = (props) => {
+
+  let myRef = React.useRef();
+
+  const handleClick = () => {
+    console.log('web component reference', myRef.current)
+  }
+
+  return <MyComponent ref={myRef} onClick={handleClick}></MyComponent>;
+}
+```
+
+Example with callback:
+
+```jsx
+const App = (props) => {
+
+  const onRefChanged = (element) => {
+    console.log('web component reference', element)
+  }
+
+  return <MyComponent ref={onRefChanged}></MyComponent>;
+}
+```
+
 ## Typescript
@@ -71,0 +103,0 @@

src/Wc.ts

@@ -10,3 +10,5 @@ /* eslint-disable @typescript-eslint/explicit-function-return-type */
 export type WcTypeProps = WcProps & {
+  // eslint-disable-next-line @typescript-eslint/ban-types
   wcType: string | Function;
+  innerRef: React.Ref<unknown>;
 };
@@ -98,2 +100,11 @@
     }
+
+    if (this.props.innerRef) {
+      if (typeof this.props.innerRef === 'function') {
+          this.props.innerRef(element);
+      }
+      else {
+          (this.props.innerRef as any).current = element;
+      }
+    }
   }
@@ -245,6 +256,7 @@
  */
+// eslint-disable-next-line @typescript-eslint/ban-types
 export const wrapWc = <T = WcProps>(tag: string | Function) => {
-  const component: React.FC<T & React.HTMLAttributes<any>> = 
-    (props: T) => React.createElement(Wc, { wcType: tag, ...props });
+  const component: React.ForwardRefExoticComponent<React.PropsWithoutRef<T & React.HTMLAttributes<any>> & React.RefAttributes<unknown>> = 
+    React.forwardRef((props: T, ref) => React.createElement(Wc, { wcType: tag, innerRef: ref, ...props }));
   return component;
 };

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

26519

increased by6.28%

Lines of code

544

increased by4.02%

Number of lines in readme file

181

increased by21.48%

No dependency changes