Security News
tea.xyz Spam Plagues npm and RubyGems Package Registries
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
mobx-router-2
Advanced tools
Readme
v0.0.8 🎉 - by @thekitze
📖 How to decouple state and UI - a.k.a. you don’t need componentWillMount
componentWillMount
to fetch data or trigger a side effect in the storebeforeEnter
, onEnter
, beforeExit
, onExit
. All of the hooks receive route
, params
, store
, and queryParams
as parameters. If the beforeExit
or beforeEnter
methods return false
the navigation action will be prevented.store.router.params
/ store.router.queryParams
so basically they're available everywhere without any additional wrapping or HOC.goTo
method on the router store, and the changes in the url are reflected automatically. So for example you can call router.goTo(views.book, {id:5, page:3})
and after the change is made in the store, the URL change will follow. You never directly manipulate the URL or the history object.<Link>
component which also populates the href attribute and works with middle click or cmd/ctrl
+ clickimport React from 'react';
import ReactDOM from 'react-dom';
import {Provider} from 'mobx-react';
import {MobxRouter, RouterStore, startRouter} from 'mobx-router';
import views from 'config/views';
//example mobx store
const store = {
app: {
title: 'MobX Router Example App',
user: null
},
//here's how we can plug the routerStore into our store
router: new RouterStore()
};
startRouter(views, store);
ReactDOM.render(
<Provider store={store}>
<MobxRouter/>
</Provider>, document.getElementById('root')
)
/config/views.js
import React from 'react';
//models
import {Route} from 'mobx-router';
//components
import Home from 'components/Home';
import Document from 'components/Document';
import Gallery from 'components/Gallery';
import Book from 'components/Book';
import UserProfile from 'components/UserProfile';
const views = {
home: new Route({
path: '/',
component: <Home/>
}),
userProfile: new Route({
path: '/profile/:username/:tab',
component: <UserProfile/>,
onEnter: () => {
console.log('entering user profile!');
},
beforeExit: () => {
console.log('exiting user profile!');
},
onParamsChange: (route, params, store) => {
console.log('params changed to', params);
}
}),
gallery: new Route({
path: '/gallery',
component: <Gallery/>,
onEnter: (route, params, store, queryParams) => {
store.gallery.fetchImages();
console.log('current query params are -> ', queryParams);
},
beforeExit: () => {
const result = confirm('Are you sure you want to leave the gallery?');
return result;
}
}),
document: new Route({
path: '/document/:id',
component: <Document/>,
beforeEnter: (route, params, store) => {
const userIsLoggedIn = store.app.user;
if (!userIsLoggedIn) {
alert('Only logged in users can enter this route!');
return false;
}
},
onEnter: (route, params) => {
console.log(`entering document with params`, params);
}
}),
book: new Route({
path: '/book/:id/page/:page',
component: <Book/>,
onEnter: (route, params, store) => {
console.log(`entering book with params`, params);
store.app.setTitle(route.title);
}
})
};
export default views;
beforeEnter
and beforeExit
hooksisUserAuthenticated
method that can be just plugged in as one of the callbacks triggered from the hook.FAQs
A simple router for MobX - forked from kitze
The npm package mobx-router-2 receives a total of 1 weekly downloads. As such, mobx-router-2 popularity was classified as not popular.
We found that mobx-router-2 demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer 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.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.
Security News
UnitedHealth Group disclosed that the ransomware attack on Change Healthcare compromised protected health information for millions in the U.S., with estimated costs to the company expected to reach $1 billion.