Need private packages and team management tools?Check out npm Teams »

@nrk/custom-element-to-react

1.1.1 • Public • Published

@nrk/custom-element-to-react

Converts a custom element to a React component, with props and events.

Installation

npm install @nrk/custom-element-to-react

Usage

Given a custom element:

// my-element.js
export default class MyElement extends HTMLElement { /* ... */ }

convert it to React component by passing in its class definition and a list of props and custom event names:

import React from 'react'
import ReactDOM from 'react-dom'
import customElementToReact from '@nrk/custom-element-to-react'
import element from './my-element.js'
 
const MyElement = customElementToReact(element, {
  props: ['prop1', 'prop2'],            // Optional. Prop names to register in React
  customEvents: ['event1', 'event2'],   // Optional. Custom events names to register in React
  suffix: '123'                         // Optional. Adds a suffix to inner custom element tag name before registering. Use to control tag name of custom element. Default: 'react'
})
 
ReactDOM.render(<MyElement />, document.getElementById('div'))

forwardRef

forwardRef provides access to the underlying CustomElement (DOM) itself instead of the React component.

<MyElement
  ref={(comp) => console.log('MyElement React Component:', comp)}
  forwardRef={(node) => console.log('MyElement actual DOM Element:', node)}
/>

Server side

If you're going to use this module to render a component in NodeJS, you should mock HTMLElement globally in order to make MyElement extends HTMLElement valid:

if (typeof window !== 'undefined' && !global.HTMLElement) {
  global.HTMLElement = class {}
}

Local development

First clone @nrk/custom-element-to-react and install its dependencies:

git clone git@github.com:nrkno/custom-element-to-react.git
cd custom-element-to-react
npm install # Installs dependencies for all packages 
npm start # Your browser will open documentation with hot reloading 

Building and committing

After having applied changes, remember to build before pushing the changes upstream.

git checkout -b feature/my-changes
# update the source code 
npm run build # Builds all the packages 
git commit -am "Add my changes"
git push origin feature/my-changes
# then make a PR to the master branch, 
# and assign another developer to review your code 

Install

npm i @nrk/custom-element-to-react

DownloadsWeekly Downloads

3

Version

1.1.1

License

MIT

Unpacked Size

16.7 kB

Total Files

5

Last publish

Collaborators

  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar