Security News
NIST Misses 2024 Deadline to Clear NVD Backlog
NIST has failed to meet its self-imposed deadline of clearing the NVD's backlog by the end of the fiscal year. Meanwhile, CVE's awaiting analysis have increased by 33% since June.
@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 8 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.
Security News
NIST has failed to meet its self-imposed deadline of clearing the NVD's backlog by the end of the fiscal year. Meanwhile, CVE's awaiting analysis have increased by 33% since June.
Security News
Cloudflare has launched a setup wizard allowing users to easily create and manage a security.txt file for vulnerability disclosure on their websites.
Security News
The Socket Research team breaks down a malicious npm package targeting the legitimate DOMPurify library. It uses obfuscated code to hide that it is exfiltrating browser and crypto wallet data.