https://github.com/imcuttle/react-pizza

The utility for create (p)react component habitat.
https://github.com/imcuttle/react-pizza

independent preact react standalone

Last synced: 28 days ago
JSON representation

The utility for create (p)react component habitat.

• Host: GitHub
• URL: https://github.com/imcuttle/react-pizza
• Owner: imcuttle
• License: mit
• Created: 2018-11-07T10:18:23.000Z (about 6 years ago)
• Default Branch: master
• Last Pushed: 2022-12-08T04:43:34.000Z (almost 2 years ago)
• Last Synced: 2024-04-25T12:21:34.787Z (7 months ago)
• Topics: independent, preact, react, standalone
• Language: JavaScript
• Homepage:
• Size: 898 KB
• Stars: 2
• Watchers: 2
• Forks: 0
• Open Issues: 10
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: License

Awesome Lists containing this project

README

        
# react-pizza

[![Build status](https://img.shields.io/travis/imcuttle/react-pizza/master.svg?style=flat-square)](https://travis-ci.org/imcuttle/react-pizza)

[![Test coverage](https://img.shields.io/codecov/c/github/imcuttle/react-pizza.svg?style=flat-square)](https://codecov.io/github/imcuttle/react-pizza?branch=master)

[![NPM version](https://img.shields.io/npm/v/react-pizza.svg?style=flat-square)](https://www.npmjs.com/package/react-pizza)

[![NPM Downloads](https://img.shields.io/npm/dm/react-pizza.svg?style=flat-square&maxAge=43200)](https://www.npmjs.com/package/react-pizza)

[![Prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat-square)](https://prettier.io/)

[![Conventional Commits](https://img.shields.io/badge/Conventional%20Commits-1.0.0-yellow.svg?style=flat-square)](https://conventionalcommits.org)

> The utility for creating (p)react component habitat.

## Feature

- Support react and [preact](https://github.com/developit/preact)

- Set props and call method or get attribute which [preact-habitat](https://github.com/zouhir/preact-habitat) is not supported

## Installation

```bash

npm install react-pizza

# or use yarn

yarn add react-pizza

```

## Usage

```javascript

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 
{this.state.count}

  }

}


// document.body

// 


const render = pizza(Timer)

const timer = render('#root', { count: 10 })

// 
10


timer.call('increase') // Call `increase` method

// 
11

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, [email protected].

## License

MIT - [imcuttle](https://github.com/imcuttle) 🐟