Nocturnally Psychologizing Millipede

    @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

    23

    Version

    1.1.1

    License

    MIT

    Unpacked Size

    16.7 kB

    Total Files

    5

    Last publish

    Collaborators

    • luminrk
    • supermeisen
    • vagifabilov
    • claudio-nrk
    • haakemon
    • zenangst
    • rannveignc
    • eschoien
    • balte
    • loftum
    • toshb
    • emte123
    • anderscan
    • lysebraate
    • opet
    • klizter
    • mikkelnygard
    • feiring
    • dervodev
    • grimbur
    • gardkroyer
    • kariaan
    • edplayz
    • elias-chairi
    • miatollaksvik
    • ytterbo
    • glennwedin
    • machineboycom
    • trulsl
    • syndrol
    • mslhm
    • cbjerkan
    • hermangudesen
    • andreeldareide
    • henningkoller
    • oleob
    • espenhalstensen
    • hakonknutzen2
    • danjohnrk
    • olapeter
    • teodor-elstad
    • michaelpande
    • lorecaster
    • wwalmnes
    • nrk-ps-teamcity
    • vincent.andersson
    • swla
    • nrk-midas-jenkins
    • andorpandor
    • jarlelin
    • nrkrichard
    • gesi
    • gundelsby-nrk
    • jonstalecarlsen
    • nrk-sofie-ci
    • nytamin
    • jesperstarkar
    • skjalgepalg
    • eirikhalvard
    • astokke
    • n640071
    • n07073
    • henrik-mattsson
    • eirikbacker
    • haavardm
    • yr
    • nrk-kurator-jenkins
    • torgeilo
    • nrk-user-sync
    • dhdeploy
    • janerikbr
    • espenwa
    • rogerhmar
    • ovstetun
    • eivind
    • 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
    • eriksalhus
    • tbnrk
    • nordanke
    • mikaelrss
    • simonmitternacht
    • christiankarlsson9
    • martintorgersen
    • rebchr
    • steipal
    • discobus
    • ingvesund
    • martingundersen
    • tinkajts
    • hallvardlid
    • tomivar
    • ajaco
    • tobinus
    • mortenok
    • nrk-ark-deploy
    • jeangilbertlouis
    • heidimork
    • ingriddraagen
    • fridajalborg
    • bruusi
    • rosvoll
    • christianeide
    • enordby
    • artzag
    • glen_imrie
    • mia.aasbakken
    • elathamna
    • evjjan17
    • olatoft
    • kongsrud
    • chrpeter
    • ingvildforseth
    • esseb
    • haraldk76
    • stigok
    • johannesodland
    • anders993
    • vildefj
    • vildepk
    • andreakn
    • rolerboler
    • meloygutt
    • anders.baggethun