@custom-elements-manifest/analyzer plugin to ✨ automatically ✨ create react wrappers for your custom elements

Overview

cem-plugin-reactify

@custom-elements-manifest/analyzer plugin to automatically create React wrappers for your custom elements based on your custom elements manifest. You can see this plugin in action here, or view the live demo on Stackblitz.

Usage

Install:

npm i -D cem-plugin-reactify

Import

custom-elements-manifest.config.js:

import reactify from 'cem-plugin-reactify';

export default {
  plugins: [
    reactify()
  ]
}

Configuration

custom-elements-manifest.config.js:

import reactify from 'cem-plugin-reactify';

export default {
  plugins: [
    reactify({
      /** Directory to write the React wrappers to, defaults to `legacy` */
      outdir: 'react',
      
      /** Provide an attribute mapping to avoid using JS/React reserved keywords */
      attributeMapping: {
        'for': '_for'
      },

      /** Array of classNames to exclude */
      exclude: ['MyElement']
    });
  ]
}

Details

You can read more about the reactification-process in this here blogpost.

Slots

Any children passed to the React component will get passed through to the custom element using {children}.

Example:

export function GenericSwitch({children}) {
  return <generic-switch>{children}</generic-switch>
}

Usage:

This gets projected to `namedslot`
">
<GenericSwitch>
  Toggle me!

  <div slot="namedslot">
    This gets projected to `namedslot`
  </div>
</GenericSwitch>

Properties

cem-plugin-reactify makes a decision on whether to use an attribute or property based on whether or not an attribute has a corresponding fieldName. If an attribute does have a fieldName, the attribute will get ignored, but the property will be used instead.

Private and protected fields will be ignored.

Example:

function GenericSwitch({checked}) {
  const ref = useRef(null);

  useEffect(() => {
    if(ref.current.checked !== undefined) {
      ref.current.checked = checked;
    }
  }, [checked]);

  return <generic-switch ref={ref}></generic-switch>
}

Usage:

<GenericSwitch checked={true}/>
<GenericList complexProperty={[{name: 'peter'}]}/>

Attributes

Since values in React get passed as JavaScript variables, it could be the case that an attribute name clashes with a React or JS reserved keyword. For example: a custom element could have a for attribute, which is a reserved keyword in JavaScript. In the plugin's configuration, you can specify an attributeMapping to prevent this clash from happening, and rename the value that gets passed to the attribute. The attribute name itself will remain untouched.

Example:

export default {
  plugins: [
    reactify({
      attributeMapping: {
        for: '_for',
      },
    }),
  ],
};

Will result in:

function GenericSkiplink({_for}) {
  return <generic-skiplink for={_for}></generic-skiplink>
}

Additionally, boolean attributes will receive a special handling.

Example:

} ">
function GenericSwitch({checked}) {
  const ref = useRef(null);

  useEffect(() => {
    if (disabled !== undefined) {
      if (disabled) {
        ref.current.setAttribute("disabled", "");
      } else {
        ref.current.removeAttribute("disabled");
      }
    }
  }, [disabled]);

  return <generic-switch ref={ref}></generic-switch>
}

Usage:

<GenericSwitch label={'hello world'}/>  // regular attribute
<GenericSwitch disabled={true}/>        // boolean attribute

Events

Event names are capitalized, camelized and prefixed with 'on', so: 'selected-changed' becomes onSelectedChanged.

Example:

} ">
function GenericSwitch({onCheckedChanged}) {
  const ref = useRef(null);

  useEffect(() => {
    if(onCheckedChanged !== undefined) {
      ref.current.addEventListener("checked-changed", onCheckedChanged);
    }
  }, []);

  return <generic-switch ref={ref}></generic-switch>
}

Usage:

<GenericSwitch onCheckedChanged={e => console.log(e)}/>
Owner
Pascal Schilp
Front-end Developer at ING
Pascal Schilp
Declarative hotkey and focus area management for React

React HotKeys A declarative library for handling hotkeys and focus areas in React applications. Upgrading from 1.*.* ? See the upgrade notes. Looking

Aleck Greenham 1.9k Sep 23, 2021
HTML to React parser that works on both the server (Node.js) and the client (browser):

HTML to React parser that works on both the server (Node.js) and the client (browser):

Mark 1000 Sep 18, 2021
CSS media queries for React

react-media react-media is a CSS media query component for React. A <Media> component listens for matches to a CSS media query and renders stuff based

React Training 2.4k Sep 25, 2021
A lightweight react library that converts raw HTML to a React DOM structure.

A lightweight react library that converts raw HTML to a React DOM structure.

Arve Knudsen 621 Sep 16, 2021
The next generation state management library for React

The next generation state management library for React

Bytedance Inc. 150 Sep 18, 2021
React Visibility - Detect when an element is becoming visible or hidden on the page.

Detect when an element is becoming visible or hidden on the page.

Md Raihan 19 Aug 14, 2021
A ReactJS password recovery box component built using the FluentUI library

A ReactJS password recovery box component built using the FluentUI library

Boia Alexandru 2 Sep 15, 2021
Extended utils for ⚛️ React.Children data structure that adds recursive filter, map and more methods to iterate nested children.

React Children Utilities Recursive and extended utils for React children opaque data structure. Installation Available as a package and can be added t

Fernando Pasik 180 Sep 17, 2021
React Refresh Token with JWT and Axios Interceptors example

Buid React JWT Refresh Token example with Axios Interceptors - Refresh Token in React.js, Axios silent refresh JWT token example

null 15 Sep 20, 2021
A component for React that utilizes the Counterpart module to provide multi-lingual/localized text content.

React Translate Component Translate is a component for React that utilizes the Counterpart module and the Interpolate component to provide multi-lingu

Martin Andert 325 Apr 14, 2021
A static site generator powered by Deno + React

A static site generator powered by Deno + React

xcatliu 1.2k Sep 16, 2021
iOS Today Widget in React Native

React Native Today Widget Experimental library investigating limits of implementation iOS App Extensions using React Native. Sample result from Comple

Matěj Kříž 339 Sep 13, 2021
redis like key-value state management solution for React

jedisdb redis like key-value state management solution for React Reactive. Redux alternative. Simple and powerful global state management system, acce

Hassan 9 Sep 6, 2021
A Fetch Library Support React New Suspense SSR

use-suspense-fetch A data fetching library for React Suspense. inspired by use-asset Feature use LRU Cache support create custom cache support React 1

Snake 6 Jul 12, 2021
A simple Facebook Chat Head like bubble for react native

react-native-floating-bubble A simple Facebook Chat Head like bubble for react native. Special thanks to bubble-for-android because this is just react

null 103 Sep 12, 2021
React-Native library for the WidgetKit framework. Integrate a Widget into your App 🍏📱

react-native-widgetkit React-Native Library for the iOS ?? WidgetKit framework Table of Contents ?? Introduction ??‍?? Installation ??‍ Usage ????‍??

Fasky 79 Sep 2, 2021
A component for use with React.

qrcode.react A React component to generate QR codes. Installation npm install qrcode.react Usage var React = require('react'); var QRCode = require('q

Paul O’Shannessy 2.6k Sep 24, 2021
Collection of Google fonts as typeface data for usage with three.js, react-three-fiber, and other tools.

Collection of Google fonts as typeface data for usage with three.js, react-three-fiber, and other tools.

Components AI 42 Jul 28, 2021
Cookie cutter react portfolio suited perfectly for Github Pages

Cookie cutter react portfolio suited perfectly for Github Pages, get up and running in less then 5 minutes, just edit the data.json file and off you go!

null 37 Sep 9, 2021