The react-poret's intro from jl917

react-poret's Introduction

Install

npm install --save react-poret

Root

import React from 'react';
import { render } from 'react-dom';
import { Root } from 'react-poret';
import App from './App';

render(
  <Root>
    <App />
  </Root>,
  document.getElementById('app'),
);

quark

const countQuark = quark({
  key: 'count',
  value: 0
})

usePoretValue, useSetPoretState

import React from 'react';
import { usePoretValue, useSetPoretState } from 'react-poret';

const countQuark = quark({
  key: 'count',
  value: 0
})

function Com1() {
  const count = usePoretValue(countQuark);
  const setCount = useSetPoretState(countQuark);

  const handleChange = () => {
    setCount(count + 1);
  }

  return (
    <div>
      <h1>Component</h1>
      <div>count: {count}</div>
      <button onClick={handleChange}>Click</button>
    </div>
  )
}

usePoretState

import React from 'react';
import { usePoretState } from 'react-poret';

const countQuark = quark({
  key: 'count',
  value: 0
})

function Com1() {
  const [count, setCount] = usePoretState(countQuark);

  const handleChange = () => {
    setCount(count + 1);
  }

  return (
    <div>
      <h1>Component</h1>
      <div>count: {count}</div>
      <button onClick={handleChange}>Click</button>
    </div>
  )
}

Recommend Projects