kelsonpw / react-chrome-extension-router

A dead simple routing solution for browser extensions written in typescript with React Hooks. Context free.

react-chrome-extension-router

A dead simple routing solution for browser extensions

Install

npm install --save react-chrome-extension-router

Usage

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import {
  goBack,
  goTo,
  popToTop,
  Link,
  Router,
  getCurrent,
  getComponentStack,
} from 'react-chrome-extension-router';

const Three = ({ message }: any) => (
  <div onClick={() => popToTop()}>
    <h1>{message}</h1>
    <p>Click me to pop to the top</p>
  </div>
);

const Two = ({ message }: any) => (
  <div>
    This is component Two. I was passed a message:
    <p>{message}</p>
    <button onClick={() => goBack()}>
      Click me to go back to component One
    </button>
    <button onClick={() => goTo(Three, { message })}>
      Click me to go to component Three!
    </button>
  </div>
);

const One = () => {
  return (
    <Link component={Two} props={{ message: 'I came from component one!' }}>
      This is component One. Click me to route to component Two
    </Link>
  );
};

const App = () => {
  useEffect(() => {
      const { component, props } = getCurrent();
      console.log(
        component
          ? `There is a component on the stack! ${component} with ${props}`
          : `The current stack is empty so Router's direct children will be rendered`
      );
      const components = getComponentStack();
      console.log(`The stack has ${components.length} components on the stack`);
  });
  return (
    <Router>
      <One />
    </Router>
  );
};

ReactDOM.render(<App />, document.getElementById('root'));

License

MIT © kelsonpw

react-chrome-extension-router's Issues

Vite unable to resolve the package - incorrect main/module/exports

Describe the bug
Vite is unable to resolve the package.

Steps to reproduce the behaviour:

Install @react-schrome-extension-router and vite
Import it anywhere
Run vite
Sample error:
Failed to resolve entry for package "react-chrome-extension-router". The package may have incorrect main/module/exports specified in its package.json: Failed to resolve entry for package "react-chrome-extension-router". The package may have incorrect main/module/exports specified in its package.json.

Expected behaviour:
Vite should serve the site

Additional info:
MacOS Monterey
Chrome
react-chrome-extension-router v1.3.1

How to have different initial route?

Hi @kelsonpw , first of all, great library. Thanks for making this.

I just wanna ask: is it possible to have different initial route? (maybe based on url hash)?

For example I want default entry point to be component <One />
but sometimes, I also want the entry point to be component <Two />,

can I do that with this library?
Or maybe I need to implement it myself?

Thanks in advance.

Private Route

Hi,
I am trying to build a private route which allows to go to a certain component only if the user is logged-in.

With 'react-router-dom', it is supposed to look like this:

export default function PrivateRoute({ children }) {
const { currentUser } = useAuth()

return currentUser ? children :
}

And I'm calling this with:

<Route exact path="/" element={ } />

Any idea on how to implement it with this package ?
Thank you for your help!

message passed to component gets used up

Hello!

I was wondering if this was an error that you have:

What I tried doing with the sample code you have in the codesandbox and noticed that if I were to do this:

const Two = ({ message, sec }) => (

goTo(Three, { message })}>//sees message and uses it up? Click me to go to component Three! Click me to go to component 3. //doesn't know what message is

);

It seems to me that the button element had used the message prop that was passed into the component and now could no longer be used again in the Link element tag. If this is the case how should I go about passing props to multiple elements?

To get current location

Firstly thank you for creating this package.
I was wondering if there is any way to get the name/path of the current component.
Similar to props.location supported by react-router.
I know we don't have a path component in your library, but was still wondering if there is any other way to achieve this.
Thanks.

Check if there is history to goBack() to?

Hello,

First of all, thanks for this awesome and easy to use router.

My question is, is there a way to check if there is a history to go back to?
So i can, for example, conditionally render the back arrow and use the goBack() function?

Also, I'm using React 16.12. with chrome extensions, and getCurrent() function always returns undefined for me.

eg. this
const Popup = () => { const current = getCurrent(); console.log(current); };

logs undefined.

Regards,
Marko