fuse-react

fuse-react is an abtraction on top of React Component which relieves the pain for those who find Redux overly complicated. fuse-react offers a solution to react routing which is more flexible and memory efficient than react-router-dom

Setting up

Setup your index

import { IComponentRoute } from "fuse-react";

interface IContext {
  foo: string;
  title: string;
}
interface ComponentContext {
  context: IContext;
  route: IComponentRoute;
  setContext: (fn: (context: IContext) => IContext) => any;
}

// create default values
createContext<IContext>({
  title: "hello World",
});

const App = createRoot(({ context, route, setContext }: ComponentContext) => {
  function clicked() {
    setContext((context) => ({ ...context, title: "Hello foo bar!!!" }));
  }
  return <div onClick={clicked}>{context.title}</div>;
});

ReactDOM.render(<AnotherApp />, document.querySelector("#root"));

Router

Add router to the mix

const App = createRoot(({ context, route, setContext }: ComponentContext) => {
  function clicked() {
    setContext((context) => ({ ...context, title: "Hello foo bar" }));
  }
  return (
    <div>
      <h1 onClick={clicked}>{context.title}</h1>

      <Link to="/foo/john">To Foo</Link>
      <Link to="/bar/john">To Bar</Link>
      <Link to="/oi">Random page</Link>
      <Switch notFound={PageNotFound}>
        <Route component={RouteFoo} path="/foo/:name" />
        <Route component={RouteBar} path="/bar/:name" />
      </Switch>
    </div>
  );
});

function RouteFoo({ context, route, setContext }: ComponentContext) {
  return <div>FOO: Name from the url {route.params.name}</div>;
}
function RouteBar({ context, route, setContext }: ComponentContext) {
  return (
    <div>
      BAR: Name from the url {route.params.name}
      <hr></hr>
      <BarDetails />
    </div>
  );
}
const BarDetails = withContext(({ route, setContext }: ComponentContext) => {
  function click() {
    setContext((context) => ({
      ...context,
      title: "Changed from bar details",
    }));
  }
  return <h1 onClick={click}>I am bar details: {route.params.name}</h1>;
});

function PageNotFound({ context, route, setContext }: ComponentContext) {
  return <div>Page not found</div>;
}

ReactDOM.render(<App />, document.querySelector("#root"));