npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@gondel/plugin-react

v1.2.8

Published

Gondel Plugin to boot react widgets and apps

Downloads

1,730

Readme

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