Socket
Socket
Sign inDemoInstall

@gondel/plugin-react

Package Overview
Dependencies
6
Maintainers
3
Versions
22
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

    @gondel/plugin-react

Gondel Plugin to boot react widgets and apps


Version published
Weekly downloads
332
decreased by-12.4%
Maintainers
3
Install size
64.3 kB
Created
Weekly downloads
 

Changelog

Source

1.2.8 (2023-05-19)

Bug Fixes

  • bump deps (7ae645b)
  • bump deps and default node version (b06c2d0)
  • bump deps and default node version (9c1aeec)
  • bump dev deps and add new build files (98f7ed2)
  • bump typescript (f5bbca8)

Readme

Source

React Plugin

This tiny plugin bootstraps React widgets and apps using Gondel.

Usage

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 />
    )
  }
}

App configuration

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} />
    )
  }
}

Component linking

It's also possible to link a gondel component to a react component without using a render method.

Sync linking example

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;
}

Lazy linking example (code splitting)

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) {

}

Manipulating state

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')

Using Gondel components from react

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.

Example

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

Last updated on 19 May 2023

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.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc