Research
Security News
Malicious npm Package Typosquats react-login-page to Deploy Keylogger
Socket researchers unpack a typosquatting package with malicious code that logs keystrokes and exfiltrates sensitive data to a remote server.
@operational/router
Advanced tools
Readme
The goal of this tiny library is to deal with custom basePath
in a sub-application.
In the context of Contiamo, every application can be run in standalone mode or be embeded inside a global contiamo product. In the second case, some url params are managed in an higher level, this is exactly what we try to solve with this library. This is our solution to compose "easily" multiple application in one.
Note: If you have a better solution, please tell us :wink: We are always happy to learn something.
npm i @operational/router react-router react-router-dom
Let's do an example to illustrate the setup of this library:
<Router>
<Route path="/:tenant/:project/pantheon" render={/* ... */} />
<Route path="/:tenant/:project/hub" render={/* ... */} />
<Route
path="/:tenant/:project/labs"
render={({ history: { push, replace } }) => (
<OperationalRouterProvider
basePath="/:tenant/:project/labs/"
pushState={push}
replaceState={replace}>
{({ resolvePath, basePath, pushState }) => {
/**
* Labs application router, relative to the `basePath`
* - I can use `basePath` to define my `Route` and retrieve `tenant` and `project` from the parent
* - I can use `<Link to={resolvePath("project")} />` to navigate inside the labs context
* - I can use `pushState("project")` to navigate programatically
*/
}}
</OperationalRouterProvider>
)}
/>
<Router>
Finally, this lib exports OperationalRouter
and withOperationalRouter
to have access to the same resolvePath
, basePath
and pushState
anywhere inside my application.
Render function style:
const MyPage = () => (
<Page title="my page">
<OperationalRouter>
{({ pushState }) => <button onClick={() => pushState("/")}>Go to labs home</button>}
</OperationalRouter>
</Page>
);
export default Page;
HOC style:
const MyPage = ({ pushState }) => (
<Page title="my page">{<button onClick={() => pushState("/")}>Go to labs home</button>}</Page>
);
export default withOperationalRouter(MyPage);
In contiamo, every applications expose a component with this shape:
export interface MyApplicationProps extends OperationalRouterProps {
/* custom props if needed to configure the app */
}
export const MyApplication: React.SFC<MyApplicationProps> = props => (
<OperationalRouterProvider {...props}>
{({ basePath }) => {
if (!basePath.includes(":tenantId")) {
throw new Error("This application need to have ':tenantId' in the basePath")
}
return <Switch>
<Route path={basePath} render={<Home />} />
<Route path={`${basePath}/projects`} render={<Projects />} />
<Route path={`${basePath}/users`} render={<Users />} />
</Switch>
}
</OperationalRouterProvider>
);
Issues, Pull Requests and extensions are welcome. No question is a silly question. Head on over to issues to see where you could get involved, or to open one that will help us further improve this project.
FAQs
Unknown package
The npm package @operational/router receives a total of 0 weekly downloads. As such, @operational/router popularity was classified as not popular.
We found that @operational/router demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 6 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
Security News
Socket researchers unpack a typosquatting package with malicious code that logs keystrokes and exfiltrates sensitive data to a remote server.
Security News
The JavaScript community has launched the e18e initiative to improve ecosystem performance by cleaning up dependency trees, speeding up critical parts of the ecosystem, and documenting lighter alternatives to established tools.
Product
Socket now supports four distinct alert actions instead of the previous two, and alert triaging allows users to override the actions taken for all individual alerts.