Research
Security News
Quasar RAT Disguised as an npm Package for Detecting Vulnerabilities in Ethereum Smart Contracts
Socket researchers uncover a malicious npm package posing as a tool for detecting vulnerabilities in Etherium smart contracts.
@depay/react-dialog-stack
Advanced tools
yarn add @depay/react-dialog-stack
or
npm install --save @depay/react-dialog-stack
import { ReactDialogStack } from '@depay/react-dialog-stack'
closeDialogStack() {
this.setState({openDialogStack: false});
}
render() {
return(
<ReactDialogStack
open={this.state.openDialogStack}
close={this.closeDialogStack}
start='StartDialog'
dialogs={{
StartDialog: <StartDialog/>,
SecondDialog: <SecondDialog/>,
ThirdDialog: <ThirdDialog/>
}}
/>
)
}
https://depayfi.github.io/react-dialog-stack/demo.html
import { ReactDialogStack } from '@depay/react-dialog-stack'
render() {
return(
<ReactDialogStack
open={this.state.openDialogStack}
close={this.closeDialogStack}
start='StartDialog'
dialogs={{
StartDialog: <StartDialog/>,
SecondDialog: <SecondDialog/>,
ThirdDialog: <ThirdDialog/>
}}
/>
)
}
close (function)
: A function living in the dialog stack parent that is called from the ReactDialogStack on a close attempt. The parent has to take care if a dialog is closable, and needs to set it's own state accordingly.
close() {
if(this.state == something) {
this.setState({ showDialog: false })
}
}
/*...*/
<ReactDialogStack
close={this.close}
open={this.state.showDialog}
/>
setNavigator (function)
: A function which will be called from the stack construtor to share the navigator to the outside:
const setNavigator = (navigator)=> {
window.dialogNavigator = navigator
}
/*...*/
<ReactDialogStack
close={this.close}
setNavigator={setNavigator}
open={this.state.showDialog}
/>
/*...*/
window.dialogNavigator.navigate('AnotherDialog')
window.dialogNavigator.set('AnotherDialog')
document (Document)
: Allows to forward a different document where the dialog is supposed to live in (created through ReactDOM portal).
<ReactDialogStack
document={someIframe.document}
/>
container (HTMLElement)
: Allows to provide an explicit container the dialog stack is rendered into (created through ReactDOM portal).
<ReactDialogStack
container={document.getElementById('app')}
/>
background (string)
: Background passed as CSS to the ReactDialog
.
<ReactDialogStack
background={'rgba(255,255,255,0.6)'}
/>
Contexts can be used in dialogs passed to ReactDialogStack
in order to communicate with the stack manager.
CloseStackContext
provides close
which can be used to close the entire ReactDialogStack
.
import { CloseStackContext } from '@depay/react-dialog-stack'
render() {
return(
<CloseStackContext.Consumer>
{close => (
<div>
<h1>I am the start dialog</h1>
<button onClick={close}>
Close Stack
</button>
</div>
)}
</CloseStackContext.Consumer>
)
}
NavigateStackContext
provides navigate
which can be used to stack/navigate another dialog and set
which allows you to set the entire stack (without animation).
Either pass the dialog name as configured in ReactDialogStack
prop named dialogs
or pass back
to navigate
to unstack the current dialog.
import { NavigateStackContext } from '@depay/react-dialog-stack'
render() {
return(
<NavigateStackContext.Consumer>
{({ navigate, set }) => (
<div>
<h1>I am the start dialog</h1>
<button onClick={()=>navigate('DialogName')}>
Next Dialog
</button>
<button onClick={()=>navigate('back')}>
Back
</button>
<button onClick={()=>set(['DialogName'])}>
Back
</button>
</div>
)}
</NavigateStackContext.Consumer>
)
}
StackContext
provides stack
which provides information about the current stack:
import { StackContext } from '@depay/react-dialog-stack'
render() {
return(
<StackContext.Consumer>
{stack => (
<div>
Current Stack:
{ stack }
</div>
)}
</StackContext.Consumer>
)
}
yarn install
yarn dev
npm publish
yarn test:cypress:debug --spec 'cypress/integration/navigate.js'
yarn test --headed
FAQs
A flexible dialog stack for react widgets.
The npm package @depay/react-dialog-stack receives a total of 173 weekly downloads. As such, @depay/react-dialog-stack popularity was classified as not popular.
We found that @depay/react-dialog-stack 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.
Research
Security News
Socket researchers uncover a malicious npm package posing as a tool for detecting vulnerabilities in Etherium smart contracts.
Security News
Research
A supply chain attack on Rspack's npm packages injected cryptomining malware, potentially impacting thousands of developers.
Research
Security News
Socket researchers discovered a malware campaign on npm delivering the Skuld infostealer via typosquatted packages, exposing sensitive data.