Security News
The Dark Side of Open Source
At Node Congress, Socket CEO Feross Aboukhadijeh uncovers the darker aspects of open source, where applications that rely heavily on third-party dependencies can be exploited in supply chain attacks.
react-dynamic-help
Advanced tools
Readme
Create flows of helpful prompts in your react application.
This library is intended to pop up help for the user while they use the app.
(In contrast to the common "tour based" help libraries, which "show your user the app in action" while they click "Next".)
V 2.8.0 - As integrated with online-go.com.
Demo at https://github.com/GreenAsJade/react-dynamic-help-demo
The app interaction is intended to be minimally intrusive in the app codebase.
The app interacts primarily by registering elements as "help targets", and calling a callback to indicate that the target has been used.
function AppWithHelp(): JSX.Element {
return (
<DynamicHelp.HelpProvider>
<App />
<HelpFlows />
</DynamicHelp.HelpProvider>
);
}
export const AComponent = (props: ConfigProps): JSX.Element => {
const { registerTargetItem } = React.useContext(DynamicHelp.Api);
const { ref: addStatButton, used: signalAddStatUsed } =
registerTargetItem("add-stat-button");
const addStat = () => {
setNewStatEntryOpen(true);
signalAddStatUsed();
};
return ( // ...
<FA
ref={addStatButton}
icon={faCirclePlus}
onClick={addStat}
/>
Help Items and their Flows are specified in a separate JSX tree.
export function HelpFlows(): JSX.Element {
return (
<div className="help-flow-container">
<HelpFlow id="new-user" showInitially={true}>
<HelpItem target="help-toggle">
<div>Click here to see more Dynamic Help</div>
</HelpItem>
</HelpFlow>
<HelpFlow id="basic" showInitially={false}>
<HelpItem target="add-stat-button">
<div>Click to add a stat</div>
</HelpItem>
<HelpItem target="stat-name-input" position="bottom-centre">
<div>Enter the name for a stat</div>
</HelpItem>
<HelpItem target="dice-chooser" position="bottom-center">
<div>Choose a dice type</div>
</HelpItem>
<HelpItem id="help-for-stat-ok" target="stat-ok">
<div>OK?</div>
// …
Things to do:
Make sure that deleted flows (and renamed ones) are removed from stored state.
Support a no-op pseudo Item somehow, so you can have a break in a flow, with a resume.
Support showing multiple Help Items at a single step in the flow.
Have the standard Help Item layout be more "callout like", so it indicates clearly what the target is.
Be able to target items via css selector as an alternative to ref
This library was packaged following https://www.youtube.com/watch?v=vRmLTZyq57U
FAQs
React Dynamic Help - Create flows of helpful popups in your React App
The npm package react-dynamic-help receives a total of 24 weekly downloads. As such, react-dynamic-help popularity was classified as not popular.
We found that react-dynamic-help demonstrated a healthy version release cadence and project activity because the last version was released less than 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
At Node Congress, Socket CEO Feross Aboukhadijeh uncovers the darker aspects of open source, where applications that rely heavily on third-party dependencies can be exploited in supply chain attacks.
Research
Security News
The Socket Research team found this npm package includes code for collecting sensitive developer information, including your operating system username, Git username, and Git email.
Security News
OpenJS is warning of social engineering takeovers targeting open source projects after receiving a credible attempt on the foundation.