@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

Package Sidebar

Install

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

Weekly Downloads

8

Version

1.1.1

License

MIT

Unpacked Size

16.7 kB

Total Files

5

Last publish

Collaborators

  • thormodb
  • siivers
  • torsrex
  • haraldsk
  • eskilgh
  • ragnaroh-nrk
  • daardal
  • arevjensen
  • julusian
  • madsern
  • andrefau
  • jfjeldskaar
  • muddah
  • jensrage
  • oysteinkoppang
  • phajsi
  • jorn_georg
  • bjornhels
  • halvorh
  • morten-nrk
  • nicklassvendsrud
  • kjellvnnrk
  • sanderknrk
  • nikolaia
  • eirikjstnrk
  • carinafraning
  • helenper
  • stefanogdennrk
  • jimmeloysund
  • tobiasrp
  • martiosk
  • jimalexberger
  • gunderwonder
  • hamnis
  • janerikb
  • luminrk
  • supermeisen
  • vagifabilov
  • claudio-nrk
  • haakemon
  • zenangst
  • rannveignc
  • eschoien
  • balte
  • toshb
  • emte123
  • anderscan
  • opet
  • klizter
  • mikkelnygard
  • feiring
  • dervodev
  • grimbur
  • gardkroyer
  • kariaan
  • edplayz
  • elias-chairi
  • miatollaksvik
  • ytterbo
  • machineboycom
  • trulsl
  • mslhm
  • cbjerkan
  • hermangudesen
  • andreeldareide
  • henningkoller
  • oleob
  • espenhalstensen
  • danjohnrk
  • olapeter
  • teodor-elstad
  • lorecaster
  • nrk-ps-teamcity
  • swla
  • nrk-midas-jenkins
  • andorpandor
  • nrkrichard
  • gesi
  • gundelsby-nrk
  • jonstalecarlsen
  • nrk-sofie-ci
  • nytamin
  • jesperstarkar
  • skjalgepalg
  • eirikhalvard
  • astokke
  • n640071
  • n07073
  • henrik-mattsson
  • haavardm
  • yr
  • nrk-kurator-jenkins
  • torgeilo
  • nrk-user-sync
  • dhdeploy
  • espenwa
  • ovstetun
  • stianlj
  • haraldkj
  • mariusu
  • cristobal
  • knuthaug
  • thohalv
  • johnarne
  • eshaswini
  • morrow
  • oyvindeh
  • laat
  • toggu
  • nrk-jenkins
  • plomma
  • evjand
  • moltubakk
  • ingridguren
  • lu-lux
  • andersli
  • silje
  • stiandg
  • sjurlur
  • andipodnrk
  • pkej
  • yosrimti
  • morten.nyhaug
  • ingvildcath
  • erlend.jones
  • brneirik
  • mollerse
  • tbnrk
  • nordanke
  • simonmitternacht
  • martintorgersen
  • rebchr
  • steipal
  • discobus
  • martingundersen
  • tinkajts
  • hallvardlid
  • tomivar
  • ajaco
  • tobinus
  • mortenok
  • nrk-ark-deploy
  • jeangilbertlouis
  • heidimork
  • ingriddraagen
  • fridajalborg
  • bruusi
  • rosvoll
  • christianeide
  • enordby
  • glen_imrie
  • mia.aasbakken
  • elathamna
  • evjjan17
  • olatoft
  • kongsrud
  • chrpeter
  • ingvildforseth
  • haraldk76
  • stigok
  • johannesodland
  • anders993
  • vildefj
  • vildepk
  • rolerboler
  • meloygutt
  • anders.baggethun