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.
component-router
Advanced tools
Readme
Redux-based routing solution for components
The idea of partial routing is coming from the need to track state of independent components in the URL.
Commonly used routers are mostly hierarchical. The great example of such a router is react-router. Unfortunately it is not possible to store component's state independently from the other component in a different "branch" of hierarchy.
They work perfectly for most of the UIs. But as soon as we are trying to build a complex UI with multiple independent components and each of those has own state you would like to preserve, it becomes a challenging task. ComponentRouter was created to provide a simple way of keeping such state in the URL with query params.
Here is an example of such interface.
bar
to pie
opened
or closed
sources
and destinations
+------------------------------------------------------------------------------+
| App "/app" |
| |
| +------------------------------+ +---------------------------------------+ |
| | chart | | filter | |
| | [->bar] [pie] | | [->opened] [closed] | |
| | | | | |
| | | | | |
| | | | | |
| | | | | |
| | | | | |
| +------------------------------+ +---------------------------------------+ |
| |
| +---------------------------------------------------+ |
| | data | |
| | [->sources] [destinations] | |
| | | |
| +---------------------------------------------------+ |
| |
+------------------------------------------------------------------------------+
As you can see each of these blocks has its own independent navigation and, for example, Filter can be closed or opened independently from currently displayed Chart type or Data tab selected.
localStorage
or even user settings in database on the server. But we are losing ability to share this page with someone else (unless we have some special "copy/paste state" functionality)/app?chart=bar&filter=opened&data=sources
Key feature is to update all links on the page if any of visible blocks changed its state. If lets all links to stay links, so it is possible to open link in a new tab, for instance. It is fixed by ComponentRouter.
NOTE href changes, so we can open link in new tab.
npm install --save redux history qs component-router
Don't forget to manually install peer dependencies (redux
, history
, qs
) if you use npm@3.
<script src="https://unpkg.com/redux/dist/redux.min.js"></script>
<script src="https://unpkg.com/qs/dist/qs.js"></script>
<script src="https://unpkg.com/history/umd/history.min.js"></script>
<script src="https://unpkg.com/component-router/build/component-router.min.js"></script>
(Module exposed as `ComponentRouter`)
http://in-flux.github.io/component-router
http://codepen.io/nkbt/pen/BNXamG?editors=101
Since ComponentRouter is working with browser location and navigation, it is not really possible to debug router in Codepen's Editor mode, but completely possible in Debug mode: [http://s.codepen.io/nkbt/debug/BNXamG] (http://s.codepen.io/nkbt/debug/BNXamG)
Currently is being developed and tested with the latest stable Node 8
on OSX
.
To run example covering all ComponentRouter
features, use yarn start
, which will compile example/index.js
git clone git@github.com:in-flux/component-router.git
cd component-router
yarn install
yarn start
# then
open http://localhost:8080
# to run ESLint check
yarn lint
# to run tests
yarn test
# to run end-to-end tests
# first, run `selenium/standalone-firefox:3.4.0` docker image
docker run -p 4444:4444 selenium/standalone-firefox:3.4.0
# then run test
yarn e2e
MIT
FAQs
Redux-based component routing solution
The npm package component-router receives a total of 38 weekly downloads. As such, component-router popularity was classified as not popular.
We found that component-router 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.