Security News
Research
Data Theft Repackaged: A Case Study in Malicious Wrapper Packages on npm
The Socket Research Team breaks down a malicious wrapper package that uses obfuscation to harvest credentials and exfiltrate sensitive data.
react-tunnels
Advanced tools
A easy way to communicate rendering logic and data to ancestor components in React.
Render React components in placeholders that are placed somewhere else in the component tree.
yarn add react-tunnels
There is a common use case in React apps where you want to define a Layout
where the content of some elements is defined by children
components. For example, you want to define Layout
just once and reuse it for every page but it has a breadcrumb whose steps depend on children
components. This tiny library allows you to define tunnels to render from an element to whatever another element in the App, even elements located on top of the tree. It's like Portal
but the target is a component instead of a DOM element.
Define a TunnelPlaceholder
identified by an id
and decide what properties are going to be passed to its render
function by defining Tunnel
components with the same id anywhere else in the app. If you define just a single Tunnel
its props will be passed straight to the render
function, if there is more than one Tunnel
for a single id
, the placeholder render
function will receive an item
argument which is an Array containing the props
for each Tunnel
. Let's see some examples.
Define a placeholder without any render function so it will render any children coming from a Tunnel
component with the same id.
import { TunnelProvider, TunnelPlaceholder, Tunnel } from 'react-tunnels'
render(
<TunnelProvider>
<div>
<TunnelPlaceholder id="my-tunnel" />
<Tunnel id="my-tunnel">
This will be rendered on the placeholder 👆
</Tunnel>
</div>
</TunnelProvider>
)
Check the real example here
It's easy to build a breadcrumb using the prop multiple
in the TunnelPlaceholder
. This allows to let it know that there will be multiple tunnels so the render
function will be called with an array of props.
const Breadcrumbs = () => (
<TunnelPlaceholder id="breadcrumb" multiple>
{({ items }) => (
items.map(({ children, href }) => (
<span><a href={href}>{children}</a></span>
))
)}
</TunnelPlaceholder>
)
const Breadcrumb = ({ children, url }) => (
<Tunnel id="breadcrumb" href={url}>
{children}
</Tunnel>
)
render(
<TunnelProvider>
{/* This will render the breadcrumb */}
<Breadcrumbs />
{/* Somewhere else in children */}
<Breadcrumb url="/products">Products</Breadcrumb>
<Breadcrumb url="/products/123">Product <strong>123</strong></Breadcrumb>
</TunnelProvider>
)
Check the live example here
This project has been developed by Javi Velasco as a way to build Breadcrumb components and Layout
customizations for a variety of React projects. Any feeback, help or improvements is highly appreciated.
This project is licensed under the terms of the MIT license.
FAQs
A easy way to communicate rendering logic and data to ancestor components in React.
We found that react-tunnels 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
Research
The Socket Research Team breaks down a malicious wrapper package that uses obfuscation to harvest credentials and exfiltrate sensitive data.
Research
Security News
Attackers used a malicious npm package typosquatting a popular ESLint plugin to steal sensitive data, execute commands, and exploit developer systems.
Security News
The Ultralytics' PyPI Package was compromised four times in one weekend through GitHub Actions cache poisoning and failure to rotate previously compromised API tokens.