React Warpgate
This tiny decorator wraps a component tree and warps the imperative method calls down the chain.
It uses the React's ref
callback feature.
To use this package you would need to be fairly familiar with React itself and its ref feature.
Installation
You can install this package with the following command:
npm install react-warpgate
Examples
These examples demonstrate how you can use this library:
Simple Usage
You can pass warpgate a single method name and it will warp that.
;;; // "target" is the default function prop warpgate passes down.const TextBox = <input type="text" ref=target style=style />; // There is no way to access the input nested inside the div and call focus on it.const CuteTextBox = <div><TextBox ...props style=color: 'pink'/></div>; // warpgate to rescue!const WarpedCuteTextBox = CuteTextBox; // Now you can do this:const instance = ;instance;
Please note that, calling these methods on unmounted elements is an error and will throw.
Manual Binding
In case you wish to bind target without having to use ref you can manually bind the target to your component.
;;; Component<any any> { thispropstargetthis; } { thispropstargetnull; } { // Some loigc to manage focus. thisrefsinput; } { return <input type="text" ref="input" />; } const WarpedManuallyBoundComponent = CuteTextBox; const instance = ;// Calls ManuallyBoundComponent's focus.instance;
Make sure you call target with null
in componentWillUnmount
or you'll have memory leak.
Multiple Methods
You can use warpgate to warp more than one function.
;;; const TextBox = <input type="text" ref=target style=style />;const CuteTextBox = <div><TextBox ...props style=color: 'pink'/></div>; const WarpedCuteTextBox = CuteTextBox; const instance = ;instance;instance;instance;instance;
Multiple Targets
You can use warpgate to warp more than one function, or for more than one target.
;;; const TextBox = <input type="text" ref=target style=style />; Component { ; } { return thispropschildren; } const CuteTextBox = <MyComponent ref=propsmyTarget> <TextBox ...props style=color: 'pink'/> </MyComponent>; const WarpedCuteTextBox = CuteTextBox; const instance = ;// Called on the input element.instance;instance;instance;instance;// Called on MyComponent.instance;
Alias
To warp common methods from multiple targets it is possible to alias methods.
This can also be useful to provide compatibility when renaming methods since
many aliases can point to the same method. To alias a method simple import alias
and put alias(method: string, alias: string)
wherever you would normally
put a method name.
;;; Component { ; } { return <div> <input ref=thispropstarget1 type="text"/> <input ref=thispropstarget2 type="text"/> </div> ; } const SomeHOC = <MultiTargetComponent ...props/>; const WarpedSomeHOC = SomeHOC; // Also possible: // warpgate(alias('click', 'tap'))// warpgate(['focus', alias('select', 'selectMe')]) const instance = ; // All called on the first input.instance;instance;// Both will call click on the first input.instance;instance;// Called on the second input.instance;
Typings
The typescript type definitions are also available and are installed via npm.
License
This project is licensed under the MIT license.