@jswork/next-react-valtio

next-react-valtio

Valtio for react.

installation

yarn add valtio derive-valtio
yarn add @jswork/next-react-valtio

usage

import '@jswork/next-react-valtio';

const InteractiveList = () => {
  const getters = {
    size: (state) => state.length
  };
  const { state, store, computed } = nx.$valtio<number[]>([1, 2, 3, 4], getters);
  return (
    <div className="bg-slate-100 p-2">
      <h1>Vite + React</h1>
      <nav className="mt-4 flex gap-1 border border-solid p-1">
        <button onClick={() => store.push(state.length + 1)}>添加</button>
        <button
          onClick={() => {
            store.splice(0, state.length, ...['a', 'b', 'c', 'd', 'e']);
          }}>
          Reset
        </button>
      </nav>
      {state.map((item, index) => (
        <div className="m-2 block border" key={index}>
          <span className="bold mr-1">{item}</span>
          <button onClick={() => store.splice(index, 1)}>删除</button>
        </div>
      ))}
      {state.length === 0 && <div className="m-2 block border">暂无数据</div>}
    </div>
  );
};

export default InteractiveList;

license

Code released under the MIT license.