Skip to content

An abtraction on top of React Component which relieves the pain for those who find Redux overly complicated.

Notifications You must be signed in to change notification settings

fuse-box/fuse-react

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

20 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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"));

About

An abtraction on top of React Component which relieves the pain for those who find Redux overly complicated.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published