@crapthings/react-wormhole

0.0.4 • Public • Published

how to use

the wrapped class component will have a wormhole method. it can access all methods and state, prop etc...

this.wormhole()
this.wormhole('namespace')
this.wormhole(['namespace1', 'namespace2'])
import React, { Component } from 'react'
import { render } from 'react-dom'
import withWormhole from '../dist'

@withWormhole('root')
class Root extends Component {
  state = {
    ts: Date.now()
  }

  componentWillUpdate() {
    this.wormhole('changeRootTs').setState({ ts: Date.now() })
  }

  render() {
    return (
      <div>
        <h3>Root</h3>
        <div>{this.state.ts}</div>
        <Nest />
      </div>
    )
  }
}

class Nest extends Component {
  componentDidMount() {
    console.log('Nest')
  }

  render() {
    return (
      <div>
        <h3>Nest</h3>
        <Nest1 />
      </div>
    )
  }
}

class Nest1 extends Component {
  componentDidMount() {
    console.log('Nest1')
  }

  render() {
    return (
      <div>
        <h3>Nest1</h3>
        <Nest2 />
      </div>
    )
  }
}

@withWormhole('changeRootTs')
class Nest2 extends Component {
  state = {
    ts: null
  }

  onClick = evt => {
    this.wormhole('root').setState({ ts: Date.now() })
  }

  render() {
    return (
      <div>
        <h3>Nest2</h3>
        <button onClick={this.onClick}>Change Root Timestamp {this.state.ts}</button>
      </div>
    )
  }
}

render(<Root />, document.getElementById('root'))

/@crapthings/react-wormhole/

    Package Sidebar

    Install

    npm i @crapthings/react-wormhole

    Weekly Downloads

    0

    Version

    0.0.4

    License

    MIT

    Unpacked Size

    35.7 kB

    Total Files

    4

    Last publish

    Collaborators

    • crapthings