Package Exports

fine-hooks

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (fine-hooks) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

fine-hooks

a simple tool give you unified React hooks accessor

no need to use eslint-plugin-react-hooks any more!!!

our target is to ——

use object as dependencies instead of array or set
some useful functionality such as usePartialEffect and useBindRef
unified hooks accessor
SOA to be simple

here is an example:

import $ from "fine-hooks";

// declare a service
const SomeService = $.CS(function SomeService() {
  const [name, setName] = $.S("test");
  return {
    name,
    setName,
  };
});

// SomeService.IN instead of useContext
// it throw error when dependency not provided
function Test() {
  const data = SomeService.IN();
  return <div>{data.name}</div>;
}

// useEveryThing by $
export default function App() {
  const [a, setA] = $.S("");
  const [b, setB] = $.S("");
  // object instead of array
  const text = $.M({ a, b }, (res) => res.a + res.b);
  const ab = $.M({ a, b });
  // ref bind with a state
  // otherwise use $.R
  const aP = $.BR(a);
  // useCallback, same as Memo
  // cb's type is (name:string)=>void
  const cb = $.C({ a, b }, (res, name: string) => {
    console.log(name, res.a, res.b);
  });
  // useEffect
  // third prop means ignore the first effect process
  $.E(
    { cb },
    (res) => {
      res.cb("changed");
    },
    true
  );

  // useLayoutEffect
  $.LE({ a }, (res) => {
    console.log(res.a);
  });
  $.E({ ab }, (res) => {
    console.log(res.ab, aP.current);
  });
  // usePartialEffect
  // take effect only when first prop change
  $.PE({ a }, { b }, (res, rel) => {
    console.log("partial", res, rel);
  });
  return (
    <div className='App'>
      <input value={a} onChange={(e) => setA(e.target.value)} />
      <input value={b} onChange={(e) => setB(e.target.value)} />
      {text}
      <SomeService.P>
        <Test />
      </SomeService.P>
    </div>
  );
}