
Research
Two Malicious Rust Crates Impersonate Popular Logger to Steal Wallet Keys
Socket uncovers malicious Rust crates impersonating fast_log to steal Solana and Ethereum wallet keys from source code.
@chakra-ui/descendant
Advanced tools
Keep track of descendant components and their relative indices.
A descendant index solution for better accessibility support in compound components.
Note 🚨: This package is primarily intended for internal use by the Chakra UI library. You should not use it directly in your production projects.
yarn add @chakra-ui/descendant
# or
npm i @chakra-ui/descendant
Descendants observer is a utility hook for keeping track of descendant elements and their relative indices.
In short, this package allows each item in a list to know its relative index and the parent of the list can keep track of each child, without needing to render in a loop and pass each component an index.
This enables component composition:
<List>
<Item /> // I'm index 0
<Item /> // I'm index 1<div>
<div>
<Item /> // I'm arbitrarily nested, but still know that I'm index 2
</div>
</div>
</List>
import { createDescendantContext } from "@chakra-ui/descendant"
import * as React from "react"
const [
DescendantsProvider,
useDescendantsContext,
useDescendants,
useDescendant,
] = createDescendantContext()
const MenuContext = React.createContext({})
function Menu({ children }) {
// 1. Call the `useDescendants` hook
const descendants = useDescendants()
const [selected, setSelected] = React.useState(1)
const context = React.useMemo(() => ({ selected, setSelected }), [selected])
return (
// 2. Add the descendants context
<DescendantsProvider value={descendants}>
<MenuContext.Provider value={context}>
<div role="menu" style={{ maxWidth: 320 }}>
<button
onClick={() => {
const prev = descendants.prev(selected)
prev.node.focus()
setSelected(prev.index)
}}
>
Prev
</button>
<button
onClick={() => {
const next = descendants.next(selected)
next.node.focus()
setSelected(next.index)
}}
>
Next
</button>
{children}
</div>
</MenuContext.Provider>
</DescendantsProvider>
)
}
const MenuItem = ({ children }) => {
const { selected, setSelected } = React.useContext(MenuContext)
// 3. Read from descendant context
const { index, register } = useDescendant()
const isSelected = index === selected
return (
<div
role="menuitem"
ref={register}
aria-selected={isSelected}
onMouseMove={() => setSelected(index)}
style={{ color: isSelected ? "red" : "black" }}
>
{children} - {index}
</div>
)
}
const Example = () => {
const [show, setShow] = React.useState(false)
const [show2, setShow2] = React.useState(false)
const toggle = () => {
setShow(!show)
if (!show === true) {
setTimeout(() => {
setShow2(true)
}, 1000)
}
}
return (
<div>
<button onClick={toggle}>Toggle</button>
<Menu>
<MenuItem>One</MenuItem>
{show && <MenuItem>Two</MenuItem>}
<MenuItem>Three</MenuItem>
<MenuItem>Four</MenuItem>
<div>
{show2 && <MenuItem>Testing 🌟</MenuItem>}
<MenuItem>Five</MenuItem>
</div>
</Menu>
</div>
)
}
FAQs
Register child nodes of a react element for better accessibility
The npm package @chakra-ui/descendant receives a total of 388,432 weekly downloads. As such, @chakra-ui/descendant popularity was classified as popular.
We found that @chakra-ui/descendant demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 2 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
Socket uncovers malicious Rust crates impersonating fast_log to steal Solana and Ethereum wallet keys from source code.
Research
A malicious package uses a QR code as steganography in an innovative technique.
Research
/Security News
Socket identified 80 fake candidates targeting engineering roles, including suspected North Korean operators, exposing the new reality of hiring as a security function.