
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.
@jouwomgeving/react-cardsort
Advanced tools
Jouw Omgeving React Cardsort component.
Install this package and its peerDependencies
:
$ npm i -S @jouwomgeving/react-cardsort \
classnames \
react \
react-dnd \
react-dnd-html5-backend \
react-dnd-touch-backend \
react-motion
import Cardsort /* component */, {
// state reducers
drop, // drop card in a pile
pull, // (optional) pull highest card in stack to bottom
push // (optional) push lowest card in stack to top
} from '@jouwomgeving/react-cardsort';
This automatically wraps the Cardsort board with react-dnd
's DragDropContext
.
If you already have an existing DragDropContext
higher up the component hierarchy
(e.g. at route level), you should just import the Board
component:
import {
Board,
drop,
// ...
}, from '@jouwomgeving/react-cardsort';
Provide the following props
with your Cardsort HoC:
{Object} actions
: state manager methods that wrap the component methods with the same name
{Function} drop
{Function} [pull]
{Function} [push]
{Object} board
: state{Object} [content]
(optional):
{Function} [formatSourceCaption]
: add a caption to the start pile{Function} [formatTargetCaption]
: format the target pile label{boolean} [hasRedo=true]
: prevents dragging a dropped card again if false
{boolean} [isCompact=true]
: expands all cards in a pile if false
next
/ prev
: React elements that trigger the pull
/push
actions from the UI{Object} theme
: CSS module selectors
.Board
.Board-group
.Board-compact
.Pile
.Pile-hover
.Card
.Card-figure
.Card-image
.Card-text
.Card-valid
.Card-wallpaper
Note: this state can be serialized; for complex card formatting options,
see the content
property above.
const myState = {
cards: [
{
{string} id, // unique identifier
{string} pile, // current pile value
{string} [image], // image URL, takes precedence over 'text'
// - set as a background image because of cross browser problems with SVG dragging
// - 'text' is used for the title attribute
{string} [template=wallpaper], // fills the card with 'image'
{string} [template=figure], // like wallpaper, but displays 'text' as a caption
{string} [text], // text content
{Array} [values], // valid pile values
},
// ...
],
piles: [
{
image: "", // optional
label: "", // optional
text: "",
value: "",
},
// ...
],
groups: [ // optional
[0],
[1, 2],
// ...
],
};
If groups
is omitted, it defaults to
[
[0],
[/* the remaining card indices */],
]
$ npm install
$ cd ./example
$ npm start
template
in the card properties and the custom formatter mapping of
the component's content
prop) as a single formatterUNLICENSED
FAQs
Jouw Omgeving React Cardsort component.
The npm package @jouwomgeving/react-cardsort receives a total of 37 weekly downloads. As such, @jouwomgeving/react-cardsort popularity was classified as not popular.
We found that @jouwomgeving/react-cardsort demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 8 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.