@gondel/plugin-react
Advanced tools
Comparing version 1.0.0-alpha.29 to 1.0.0
@@ -6,2 +6,18 @@ # Change Log | ||
# [1.0.0](https://github.com/namics/gondel/compare/v0.1.0...v1.0.0) (2019-11-28) | ||
### Bug Fixes | ||
* **core:** prevent plugins from being registered twice when being in different js files ([66aedec](https://github.com/namics/gondel/commit/66aedec)), closes [#48](https://github.com/namics/gondel/issues/48) | ||
### BREAKING CHANGES | ||
* **core:** enhances structure of pluginEvents object to track if a plugin (in another js file) has already been initialized | ||
# [0.1.0](https://github.com/namics/gondel/compare/v0.0.8...v0.1.0) (2019-04-08) | ||
@@ -8,0 +24,0 @@ |
/** | ||
* This is a plugin which allows a simplified usage of gondel together with react | ||
*/ | ||
import { GondelBaseComponent } from "@gondel/core"; | ||
import { GondelBaseComponent, GondelComponent } from "@gondel/core"; | ||
import React, { ComponentLifecycle, StatelessComponent, ComponentClass } from "react"; | ||
@@ -62,1 +62,3 @@ export declare class GondelReactComponent<State> extends GondelBaseComponent implements ComponentLifecycle<null, State> { | ||
} | ||
/** React hook to use Gondel components inside React */ | ||
export declare function useGondelComponent<TComponentType extends GondelComponent>(): readonly [(element: HTMLElement | null) => void, TComponentType | null]; |
@@ -17,4 +17,4 @@ var __extends = (this && this.__extends) || (function () { | ||
*/ | ||
import { GondelBaseComponent } from "@gondel/core"; | ||
import React from "react"; | ||
import { GondelBaseComponent, startComponents, stopComponents, getComponentByDomNode, hasMountedGondelComponent } from "@gondel/core"; | ||
import React, { useCallback, useRef, useState, useEffect } from "react"; | ||
import { createRenderAbleAppWrapper } from "./AppWrapper"; | ||
@@ -95,2 +95,26 @@ /** | ||
export { GondelReactComponent }; | ||
/** React hook to use Gondel components inside React */ | ||
export function useGondelComponent() { | ||
var _a = useState(null), gondelInstance = _a[0], setGondelInstance = _a[1]; | ||
var ref = useRef(); | ||
var refFunction = useCallback(function (element) { | ||
if (element) { | ||
ref.current = element; | ||
startComponents(element).then(function () { | ||
setGondelInstance(hasMountedGondelComponent(element) ? getComponentByDomNode(element) : null); | ||
}); | ||
} | ||
}, []); | ||
useEffect(function () { | ||
// Cleanup on unmount | ||
return function () { | ||
var element = ref.current; | ||
if (element) { | ||
stopComponents(element); | ||
ref.current = undefined; | ||
} | ||
}; | ||
}, []); | ||
return [refFunction, gondelInstance]; | ||
} | ||
//# sourceMappingURL=index.js.map |
{ | ||
"name": "@gondel/plugin-react", | ||
"version": "1.0.0-alpha.29+e86b493", | ||
"version": "1.0.0", | ||
"description": "Gondel Plugin to boot react widgets and apps", | ||
@@ -28,10 +28,10 @@ "bugs": "https://github.com/namics/gondel/issues", | ||
"devDependencies": { | ||
"@gondel/core": "^1.0.0-alpha.29+e86b493", | ||
"@gondel/core": "^1.0.0", | ||
"npm-run-all": "4.1.5", | ||
"react": "16.8.3", | ||
"react-dom": "16.8.3", | ||
"react": "16.11.0", | ||
"react-dom": "16.11.0", | ||
"rimraf": "3.0.0", | ||
"typescript": "3.6.2" | ||
}, | ||
"gitHead": "e86b49371c0df21b2e338d3f7a2c4fc448e8b178" | ||
"gitHead": "45edacbe40d1307cf4a7471a85554dba385b144d" | ||
} |
@@ -1,2 +0,2 @@ | ||
# React Lazy Plugin | ||
# React Plugin | ||
@@ -162,1 +162,51 @@ This tiny plugin bootstraps React widgets and apps using Gondel. | ||
``` | ||
## Using Gondel components from react | ||
The `useGondelComponent` hook allows to use a Gondel UI component like an accordion or button inside a react app. | ||
```js | ||
import { useGondelComponent } from '@gondel/plugin-react'; | ||
const Button = (props) => { | ||
const [ref] = useGondelComponent(); | ||
return ( | ||
<button ref={ref} data-g-name="Button"></button> | ||
); | ||
}; | ||
``` | ||
In addition to the `ref` object an instance of the gondel component is returned. | ||
This allows controlling the Gondel component from react. | ||
```js | ||
// react component | ||
import { useGondelComponent } from '@gondel/plugin-react'; | ||
const Button = (props) => { | ||
const [ref, gondelButtonInstance] = useGondelComponent(); | ||
return ( | ||
<button onClick={() => { | ||
// Ensure that the gondelInstance is already initialized | ||
if (gondelButtonInstance) { | ||
// Execute a class method from the Gondel component | ||
gondelButtonInstance.setIsEnabled(false); | ||
} | ||
}} ref={ref} data-g-name="Button"></button> | ||
); | ||
}; | ||
// gondel component | ||
import { Component, GondelBaseComponent } from '@gondel/core'; | ||
@Component('Button') | ||
export class Button extends GondelBaseComponent { | ||
setIsEnabled(newState) { | ||
if(newState) { | ||
this._ctx.removeAttribute('disabled'); | ||
} else { | ||
this._ctx.setAttribute('disabled'); | ||
} | ||
} | ||
} | ||
``` |
/** | ||
* This is a plugin which allows a simplified usage of gondel together with react | ||
*/ | ||
import { GondelBaseComponent } from "@gondel/core"; | ||
import React, { ComponentLifecycle, StatelessComponent, ComponentClass } from "react"; | ||
import { | ||
GondelBaseComponent, | ||
GondelComponent, | ||
startComponents, | ||
stopComponents, | ||
getComponentByDomNode, | ||
hasMountedGondelComponent | ||
} from "@gondel/core"; | ||
import React, { | ||
ComponentLifecycle, | ||
StatelessComponent, | ||
ComponentClass, | ||
useCallback, | ||
useRef, | ||
useState, | ||
useEffect | ||
} from "react"; | ||
import { createRenderAbleAppWrapper } from "./AppWrapper"; | ||
@@ -154,1 +169,28 @@ | ||
} | ||
/** React hook to use Gondel components inside React */ | ||
export function useGondelComponent<TComponentType extends GondelComponent>() { | ||
const [gondelInstance, setGondelInstance] = useState<TComponentType | null>(null); | ||
const ref = useRef<HTMLElement | undefined>(); | ||
const refFunction = useCallback((element: HTMLElement | null) => { | ||
if (element) { | ||
ref.current = element; | ||
startComponents(element).then(() => { | ||
setGondelInstance( | ||
hasMountedGondelComponent(element) ? getComponentByDomNode<TComponentType>(element) : null | ||
); | ||
}); | ||
} | ||
}, []); | ||
useEffect(() => { | ||
// Cleanup on unmount | ||
return () => { | ||
const element = ref.current; | ||
if (element) { | ||
stopComponents(element); | ||
ref.current = undefined; | ||
} | ||
}; | ||
}, []); | ||
return [refFunction, gondelInstance] as const; | ||
} |
Sorry, the diff of this file is not supported yet
Manifest confusion
Supply chain riskThis package has inconsistent metadata. This could be malicious or caused by an error when publishing the package.
Found 1 instance in 1 package
No v1
QualityPackage is not semver >=1. This means it is not stable and does not support ^ ranges.
Found 1 instance in 1 package
33797
479
1
212
0