react-aptor - npm Package Compare versions

Comparing version 1.0.3 to 1.1.0

esm/useAptor.d.ts

@@ -21,3 +21,3 @@ import { ForwardedRef, RefObject } from 'react';
  */
-export default function useAptor<T>(ref: ForwardedRef<APIObject>, configuration: AptorConfiguration<T>): RefObject<HTMLElement>;
+export default function useAptor<T>(ref: ForwardedRef<APIObject>, configuration: AptorConfiguration<T>, deps?: never[]): RefObject<HTMLElement>;
 export {};

esm/useAptor.js

@@ -1,2 +0,2 @@
-import { useEffect, useImperativeHandle, useState, useRef } from 'react';
+import { useEffect, useImperativeHandle, useState, useRef, useCallback, } from 'react';
 /**
@@ -8,3 +8,4 @@ * react aptor(api-connector) a hook which connect api to react itself
  */
-export default function useAptor(ref, configuration) {
+export default function useAptor(ref, configuration, deps) {
+    if (deps === void 0) { deps = []; }
     var _a = useState(null), instance = _a[0], setInstance = _a[1];
@@ -16,6 +17,8 @@ var domRef = useRef(null);
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, []);
+    }, deps);
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    useImperativeHandle(ref, getAPI(instance, params), [instance]);
+    var api = useCallback(getAPI(instance, params), [instance]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    useImperativeHandle(ref, api, [api]);
     return domRef;
 }

lib/useAptor.d.ts

@@ -21,3 +21,3 @@ import { ForwardedRef, RefObject } from 'react';
  */
-export default function useAptor<T>(ref: ForwardedRef<APIObject>, configuration: AptorConfiguration<T>): RefObject<HTMLElement>;
+export default function useAptor<T>(ref: ForwardedRef<APIObject>, configuration: AptorConfiguration<T>, deps?: never[]): RefObject<HTMLElement>;
 export {};

lib/useAptor.js

@@ -10,3 +10,4 @@ "use strict";
  */
-function useAptor(ref, configuration) {
+function useAptor(ref, configuration, deps) {
+    if (deps === void 0) { deps = []; }
     var _a = react_1.useState(null), instance = _a[0], setInstance = _a[1];
@@ -18,7 +19,9 @@ var domRef = react_1.useRef(null);
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, []);
+    }, deps);
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    react_1.useImperativeHandle(ref, getAPI(instance, params), [instance]);
+    var api = react_1.useCallback(getAPI(instance, params), [instance]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    react_1.useImperativeHandle(ref, api, [api]);
     return domRef;
 }
 exports.default = useAptor;

package.json

 {
   "name": "react-aptor",
-  "version": "1.0.3",
+  "version": "1.1.0",
   "private": false,
@@ -5,0 +5,0 @@ "description": "React API connector",

README.md

 <h1 align="center">React Aptor</h1>
-<p align="center"><img src="./doc/assets/logo.svg" width="450"></p>
+<p align="center"><img src="./doc/assets/logo.svg" alt="react aptor logo" width="450"></p>
 <p align="center">React API Connector</p>
+<p align="center">
+  <a href="https://github.com/amirHossein-Ebrahimi/react-aptor/blob/master/license">
+    <img src="https://img.shields.io/badge/License-MIT-yellow.svg" alt="license" />
+  </a>
+  <a href="https://npmjs.org/package/react-aptor">
+    <img src="https://img.shields.io/npm/dt/react-aptor.svg" alt="downloads" />
+  </a>
+   
+  <a href="https://bundlephobia.com/result?p=react-aptor">
+    <img src="https://img.shields.io/bundlephobia/minzip/react-aptor.svg" alt="downloads" />
+  </a>
+</p>
 
 ---
+<p align="right">
+   <a href="./doc/localization/fa.md">آموزش فارسی</a>
+</p>
 
-[آموزش فارسی](./doc/localization/fa.md)
 
@@ -23,29 +37,16 @@ Most packages are developed separately in javascript or typescript for increasing generality to make them us in all libraries and frameworks.
 
-We strived to solve them all at once
+We strive to solve them all at once
 
-### Small
+## Features
+***
+- **Small**
+   + Zero-dependency with less than 1 kilobyte size 😱 [react-aptor](https://bundlephobia.com/result?p=react-aptor)
+- **Manageable**
+   + Your used/defined APIs are entirely under your control. Make it possible to define a slice of APIs which you are surely going to use.
+- **React-ish**
+   + Developed with lots of care, try to be zero-anti-pattern in react.
+- **Simple**
+- **Typescript**
 
-The unparsed project size is less than 1 kilobyte (the greatest file is 352 bytes).
-
-### Manageable
-
-Your used/defined APIs are entirely under your control. Make it possible to define a slice of APIs which you are surely going to use.
-
-### React-ish
-
-Developed with lots of care, try to be zero-anti-pattern in react.
-
-### Simple
-
-Simple with a good developer experience.
-
-### Typescript
-
-It was developed in typescript and provide the following on the fly:
-
-- auto-complete
-- type-checking
-
 ## How to use
-
 Connect your react app to any third party in three-step
@@ -65,4 +66,5 @@
 import Something from 'your-third-party'
-export default function instantiate(node, params) =>
-  new Something(node, options)
+export default function instantiate(node, params) {
+  return new Something(node, {...params, ...yourCustomConfig} )
+}
 ```
@@ -118,5 +120,5 @@
 The params will be then passed to your `instantiate` and `getAPI` function, as you saw in the first and second steps.
-The value of params doesn't have any limitation and it can be any arbitrary type (e.g. `undefined`, `number`, `string`, `object`). You have full access to props in your component and you can define params value by props too.
+The value of params doesn't have any limitation, and it can be any arbitrary type (e.g. `undefined`, `number`, `string`, `object`). You have full access to props in your component and you can define params value by props too.
 
-**Usage Step**
+**Action Step**
 
@@ -144,2 +146,18 @@ ```jsx
 
+## core 
+
+### Options
+#### ref `ForwardedRef ref` *`required`*
+The react `useRef` or `createRef` ref instance to store you api  
+#### configuration `Object` *`required`*
+- ##### instantiate `function(node, params): Instance` *`required`*
+  A function that receives ref for probable bounded-node and params and returns an instance of your third-party. 
+- ##### getAPI `function(Instance, params): ApiObject` *`required`*
+  A function which receives instantiated instance and params and returns a key-value pair object for api handlers. 
+- ##### params `any`
+  Anything. It can be use props or pre-defined options.
+
+#### deps `Array[any]` `[]`
+react dependencies array for re-instantiating your third-party-packages by calling `instantiate` with latest node, params. 
+
 ## **Donation**
@@ -153,2 +171,3 @@
 
+
 ## Samples
@@ -155,0 +174,0 @@

src/useAptor.ts

@@ -1,2 +0,10 @@
-import { useEffect, useImperativeHandle, useState, useRef, ForwardedRef, RefObject } from 'react';
+import {
+  useEffect,
+  useImperativeHandle,
+  useState,
+  useRef,
+  ForwardedRef,
+  RefObject,
+  useCallback,
+} from 'react';
 
@@ -22,2 +30,3 @@ // types:misc
  * @param {Object} configuration - configuration object for setup
+ * @param {Array} [deps=[]] - react dependencies array
  * @return domRef - can be bound to dom element
@@ -27,3 +36,4 @@ */
   ref: ForwardedRef<APIObject>,
-  configuration: AptorConfiguration<T>
+  configuration: AptorConfiguration<T>,
+  deps = []
 ): RefObject<HTMLElement> {
@@ -37,8 +47,11 @@ const [instance, setInstance] = useState<Nullable<T>>(null);
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
+  }, deps);
 
   // eslint-disable-next-line react-hooks/exhaustive-deps
-  useImperativeHandle(ref, getAPI(instance, params), [instance]);
+  const api = useCallback(getAPI(instance, params), [instance]);
 
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  useImperativeHandle(ref, api, [api]);
+
   return domRef;
 }

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

16308

increased by12.6%

Lines of code

157

increased by12.95%

Number of lines in readme file

200

increased by10.5%

No dependency changes