react-pizza

The utility for create (p)react component habitat.

Usage no npm install needed!

<script type="module">
  import reactPizza from 'https://cdn.skypack.dev/react-pizza';
</script>

README

react-pizza

Build status Test coverage NPM version NPM Downloads Prettier Conventional Commits

The utility for creating (p)react component habitat.

Feature

  • Support react and preact
  • Set props and call method or get attribute which preact-habitat is not supported

Installation

npm install react-pizza
# or use yarn
yarn add react-pizza

Usage

import * as React from 'react'
import * as pizza from 'react-pizza'

class Timer extends React.Component {
  state = {
    count: this.props.count
  }

  increase() {
    this.setState({ count: this.state.count + 1 })
  }

  render() {
    return <p>{this.state.count}</p>
  }
}

// document.body
// <div id="root"></div>
const render = pizza(Timer)
const timer = render('#root', { count: 10 })
// <div id="root"><p>10</p></div>

timer.call('increase') // Call `increase` method
// <div id="root"><p>11</p></div>
timer.ref(0).current.state === timer.ref()[0].current.state) === timer.call('state', 0)
// { count: 11 }

// Set the props of all elements
timer.setProps({ count: 10 })
// Set the prop of #root element
timer.setProps({ count: 10 }, document.querySelect('#root'))
// Set the prop of first element
timer.setProps({ count: 10 }, 0)

// Unmount timer in all elements
timer.remove()

timer.remove(0)
timer.remove(document.querySelect('#root'))

// Mount origin
timer.origin === render.origin
timer.origin === Timer

Contributing

  • Fork it!
  • Create your new branch:
    git checkout -b feature-new or git checkout -b fix-which-bug
  • Start your magic work now
  • Make sure npm test passes
  • Commit your changes:
    git commit -am 'feat: some description (close #123)' or git commit -am 'fix: some description (fix #123)'
  • Push to the branch: git push
  • Submit a pull request :)

Authors

This library is written and maintained by imcuttle, moyuyc95@gmail.com.

License

MIT - imcuttle 🐟