Security News
Combatting Alert Fatigue by Prioritizing Malicious Intent
In 2023, data breaches surged 78% from zero-day and supply chain attacks, but developers are still buried under alerts that are unable to prevent these threats.
@gondel/plugin-react
Advanced tools
This tiny plugin bootstraps React widgets and apps using Gondel.
HTML
<div data-g-name="DemoWidget">Loading..</div>
JavaScript
import { GondelReactComponent } from '@gondel/plugin-react';
import { Component } from '@gondel/core';
import { App } from './App';
import React from 'react';
@Component('DemoWidget')
export class DemoWidget extends GondelReactComponent {
render() {
return (
<App />
)
}
}
Most apps need some specific configuration e.g. API enpoints or other settings.
The following pattern allows you to pass a basic configuration from the DOM to your application.
This guarantees us that we have the full flexibility to pass a configuration, so that it can get rendered by anyone (e.g. CMS).
HTML
<div data-g-name="DemoWidget">
<script type="text/json">{ "foo":"bar" }</script>
Loading..
</div>
JavaScript
import { GondelReactComponent } from '@gondel/plugin-react';
import { Component } from '@gondel/core';
import React from 'react';
import { App } from './App';
@Component('DemoWidget')
export class DemoWidget extends GondelReactComponent {
render(config) {
return (
<App config={config} />
)
}
}
It's also possible to link a gondel component to a react component without using a render method.
In the following example below the React app will be bundled into the same bundle (no code splitting).
HTML
<div data-g-name="DemoWidget">
<script type="text/json">{ "foo":"bar" }</script>
Loading..
</div>
JavaScript
import { GondelReactComponent } from '@gondel/plugin-react';
import { Component } from '@gondel/core';
import { App } from './App';
@Component('DemoWidget')
export class DemoWidget extends GondelReactComponent {
App = App;
}
To only lazy load the JavaScript of your React widget if the matching HTML Element is present, you can use the following pattern below which is called lazy linking:
HTML
<div data-g-name="DemoWidget">
<script type="text/json">{ "foo":"bar" }</script>
Loading..
</div>
JavaScript
import { GondelReactComponent } from '@gondel/plugin-react';
import { Component } from '@gondel/core';
const loader = () => import('./App');
@Component('DemoWidget')
export class DemoWidget extends GondelReactComponent.create(loader, "App") {
}
To use a react App with a default export the second parameter of create
can be skipped.
import { GondelReactComponent } from '@gondel/plugin-react';
import { Component } from '@gondel/core';
const loader = () => import('./App');
@Component('DemoWidget')
export class DemoWidget extends GondelReactComponent.create(loader) {
}
Initially the state is load from the script tag inside the components HTML markup.
In the following example below, Gondel would extract the initial state { theme: 'light' }
:
<div data-g-name="DemoWidget">
<script type="text/json">{ "theme":"light" }</script>
Loading..
</div>
This initial state can be accessed inside the GondelReactComponent
using this.state
.
It is even possible to update the state of the component by calling the method this.setState(...)
:
import React from 'react';
import { GondelReactComponent } from '@gondel/plugin-react';
import { Component } from '@gondel/core';
const DemoApp = ({ theme }: {theme: 'light' | 'dark'}) => (
<h1 className={theme === 'dark' ? 'dark' : 'light'}>
Hello World
</h1>
);
@Component('DemoWidget')
export class DemoWidget extends GondelReactComponent.create(() => DemoApp) {
setTheme(theme: 'light' | 'dark') {
this.setState({ theme });
}
}
In the example above we've created a public setTheme
method which is now a public API for your React widget.
In combination with getComponentByDomNode
it allows changing the state during runtime by external components:
getComponentByDomNode(domElement).setTheme('dark')
The useGondelComponent
hook allows us to use a Gondel UI component like an accordion or button inside a React app.
This can be really handy if you want to interop with your existing component markup inside of React.
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 gets returned.
This allows to fully control the Gondel component from the React code.
React component
import { useGondelComponent } from '@gondel/plugin-react';
const Button = (props) => {
const [ref, gondelButtonInstance] = useGondelComponent();
return (
<button
ref={ref}
data-g-name="Button"
onClick={() => {
// Ensure that the gondelInstance is already initialized
if (gondelButtonInstance) {
// Execute a class method from the Gondel component
gondelButtonInstance.setIsEnabled(false);
}
}}>
Button text
</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');
}
}
}
FAQs
Gondel Plugin to boot react widgets and apps
The npm package @gondel/plugin-react receives a total of 415 weekly downloads. As such, @gondel/plugin-react popularity was classified as not popular.
We found that @gondel/plugin-react demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 3 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
In 2023, data breaches surged 78% from zero-day and supply chain attacks, but developers are still buried under alerts that are unable to prevent these threats.
Security News
Solo open source maintainers face burnout and security challenges, with 60% unpaid and 60% considering quitting.
Security News
License exceptions modify the terms of open source licenses, impacting how software can be used, modified, and distributed. Developers should be aware of the legal implications of these exceptions.