reaviz / reakeys

⌨️ React Hotkeys Hook. Maintained by @goodcodeus.

Data visualization library for React

---

REAVIZ is a modular chart component library that leverages React natively for rendering the components while using D3js under the hood for calculations. The library provides an easy way to get started creating charts without sacrificing customization ability.

🚀 Quick Links

• Checkout the demos
• Learn more in the docs
• Learn about updates from the changelog

💎 Other Projects

• Unify Viz - Premium offering 850+ Figma and React professionally designed data visualization components.
• Reagraph - Open-source library for large webgl based network graphs.
• Reablocks - Open-source component library for React based on Tailwind.
• Reaflow - Open-source library for workflow and diagram graphs.

✨ Features

Chart types include:

• Bar Chart
  • Single Series Vertical / Horizontal
  • Multi Series Vertical / Horizontal
  • Stacked Vertical / Horizontal
  • Stacked Normalized Vertical / Horizontal
  • Stacked Diverging Vertical / Horizontal
  • Marimekko
  • Radial
  • Sparkline
  • Waterfall
• Line Chart
  • Single Series
  • Multi Series
  • Stacked
  • Stacked Normalized
  • Radial
  • Sparklines
• Area Chart
  • Single Series
  • Multi Series
  • Stacked
  • Stacked Normalized
  • Radial
  • Sparklines
• Scatter Chart
  • Linear
  • Radial
• Pie Chart
  • Standard
  • Exploded
  • Donut Chart
• Sankey chart
• Gauge
  • Radial
  • Linear
  • Stacked Radial
• Map Chart
• Heatmap
  • Standard
  • Year Calendar
  • Month Calendar
• Venn Diagram
  • Standard
  • Euler
  • Fixed Euler
• Bubble Chart
• Treemap
• Bar List
• Meter
• Spider / Radar
• Funnel Chart

Additional features:

• Legend
  • Discrete
  • Sequential
• Axis
  • Linear
  • Radial
  • Advanced Label Positioning
• Gestures
  • Pinch
  • Pan
  • Zoom
  • Move
• Tooltip
  • Single Value
  • Grouped Values
• Line/Area Series Symbols
• Animations Enter/Update/Exit
• Brush
• Patterns
• Gradients
• Grid Lines
• Mark Lines
• BigInt Support
• Auto Sizing
• Bar Guidelines
• Range Lines
• Animated Counts
• a11y Support for labels, roles and tabbing
• SSR

📦 Install

To use reaviz in your project, install it via npm/yarn:

npm i reaviz --save

then import a chart type into your JSX element:

import { BarChart } from 'reaviz';

const data = [
  { key: 'IDS', data: 14 },
  { key: 'Malware', data: 5 },
  { key: 'DLP', data: 18 }
];

const App = () => <BarChart width={350} height={250} data={data} />;

Checkout this demo live or visit the demos page to learn more!

🔭 Development

If you want to run REAVIZ locally, its super easy!

• Clone the repository
• npm i
• npm start
• Browser opens to Storybook page

❤️ Contributors & Credits

Thanks to Netlify for hosting!

Thanks to all our contributors!

reakeys's Issues

navigator variable access not protected (undefined during SSR)

I'm submitting a...

[ ] Regression (a behavior that used to work and stopped working in a new release)
[X] Bug report  
[ ] Performance issue
[X] Feature request
[ ] Documentation issue or request
[ ] Other... Please describe:

Current behavior

Currently in utils.ts the navigator variable access is not protected against being undefined (for example during SSR with Gatsby)

Expected behavior

If navigator variable does not exist, just return isMac = false

What is the motivation / use case for changing the behavior?

Support SSR rendering

Environment

Libs:
- react version: 17.x.x
- reakeys version: 1.2.9


Browser:
- [ ] Chrome (desktop) version XX
- [ ] Chrome (Android) version XX
- [ ] Chrome (iOS) version XX
- [ ] Firefox version XX
- [ ] Safari (desktop) version XX
- [ ] Safari (iOS) version XX
- [ ] IE version XX
- [ ] Edge version XX
- [ X ] SSR
 
For Tooling issues:
- Node version: XX  
- Platform:  

Others:

Supporting + character

I'm submitting a...

[ ] Regression (a behavior that used to work and stopped working in a new release)
[x] Bug report  
[ ] Performance issue
[x] Feature request
[ ] Documentation issue or request
[ ] Other... Please describe:

Current behavior

The requirement I am facing is a hotkey that's triggered by a combination of SHIFT + +

useHotkeys([{name: 'hotkey', keys: ['shift++']);

This above doesn't work and it seems to be a problem in most hotkey libraries, and the way it's solved is with specifying different combination key for use cases like this.

Expected behavior

Being able to use shift and + to trigger a callback

Minimal reproduction of the problem with instructions

useHotkeys([{name: 'hotkey', keys: ['shift++']);

What is the motivation / use case for changing the behavior?

This'll allow more combinations and be able to use these characters (-, +) in combinations

Thanks for elegant library, really wanna use it, and I could help with this issue if it is feasible.

Duplicate listeners when attaching to an element

I'm submitting a...

[ ] Regression (a behavior that used to work and stopped working in a new release)
[x] Bug report  
[ ] Performance issue
[ ] Feature request
[ ] Documentation issue or request
[ ] Other... Please describe:

Current behavior

When looking into #16 I noticed in the examples that listeners attached to an element are not properly cleaned. They get duplicated so you may have a listener that's fired multiple times with old values.

That could indicate a memory leak.

Expected behavior

I was expecting to have only one listener on a given element: the current one.

Minimal reproduction of the problem with instructions

https://stackblitz.com/edit/react-ts-qmxaq3?file=App.tsx

• In the reproduction, click on the gray element
• Press "i" to increase the counter
• There's 1 more alert every time "i" is pressed and the alerts show an old value

What is the motivation / use case for changing the behavior?

Environment

Libs:
- react version: latest
- reakeys version: latest


Browser:
- [x] Chrome (desktop) version XX
- [ ] Chrome (Android) version XX
- [ ] Chrome (iOS) version XX
- [ ] Firefox version XX
- [ ] Safari (desktop) version XX
- [ ] Safari (iOS) version XX
- [ ] IE version XX
- [ ] Edge version XX
 
For Tooling issues:
- Node version: XX  
- Platform:  

Others:

Cleanup function doesn't re-attach events that have been overwrited

I'm submitting a...

[ ] Regression (a behavior that used to work and stopped working in a new release)
[x] Bug report  
[ ] Performance issue
[ ] Feature request
[ ] Documentation issue or request
[ ] Other... Please describe:

Current behavior

1. In component A, attach a listener to a key, e.g "m"
2. In component B, attach a listener to the same key while A is still in the page
3. Now unmount B while A is still in the page

A's key listener don't work anymore.

Expected behavior

I would expect A's listeners to not be overwritten anymore and thus work.

Minimal reproduction of the problem with instructions

https://stackblitz.com/edit/react-ts-3rlpgx?file=App.tsx

1. In the above reproduction, press "m" to generate a random number.
2. Click on the button to open the modal.
3. In that modal, press "m" to close it.
4. Now try to press "m" to pick a random number again: it doesn't work anymore.

What is the motivation / use case for changing the behavior?

We have a similar use case as the reproduction. A modal overwrites others shortcuts and when it's removed, the listeners are not re-attached (it's not re-rendered).

Environment

Libs:
- react version: latest
- reakeys version: latest


Browser:
- [x] Chrome (desktop) version XX
- [ ] Chrome (Android) version XX
- [ ] Chrome (iOS) version XX
- [ ] Firefox version XX
- [ ] Safari (desktop) version XX
- [ ] Safari (iOS) version XX
- [ ] IE version XX
- [ ] Edge version XX
 
For Tooling issues:
- Node version: XX  
- Platform:  

Others:

Memoized listeners are not re-attached when the ref is updated

I'm submitting a...

[ ] Regression (a behavior that used to work and stopped working in a new release)
[x] Bug report  
[ ] Performance issue
[ ] Feature request
[ ] Documentation issue or request
[ ] Other... Please describe:

Current behavior

When memoizing the array that's passed to useHotkeys, the listeners are not re-attached when a ref from the array is updated.

That's because refs are mutable, so there's no "re-render" triggered when they are updated.

Expected behavior

I would expect the listeners to be attached to the ref I am passing.

Minimal reproduction of the problem with instructions

https://stackblitz.com/edit/react-ts-fsaxks?file=App.tsx

• In the reproduction, press "a"
• Then click the "show" button
• Press "a" again
• The listener is still attached to the document, not the div

What is the motivation / use case for changing the behavior?

I think that asking for a RefObject suggests that you can swap it on the fly and it will just work. The truth is that it needs to act more like a state, where an update triggers a re-render.

There's another issue that's caused by this: https://stackblitz.com/edit/react-ts-tzrezy?file=App.tsx,style.css (EDIT: created #19 for that one).

Environment

Libs:
- react version: X.Y.Z
- reakeys version: X.Y.Z


Browser:
- [x] Chrome (desktop) version XX
- [ ] Chrome (Android) version XX
- [ ] Chrome (iOS) version XX
- [ ] Firefox version XX
- [ ] Safari (desktop) version XX
- [ ] Safari (iOS) version XX
- [ ] IE version XX
- [ ] Edge version XX
 
For Tooling issues:
- Node version: XX  
- Platform:  

Others:

Feature request - Unregister shortcut

At this time, it is possible to register new shortcuts using useHotkeys, but it doesn't see possible to unregister shortcuts.

Maybe it's possible but not documented? (is that what the name property is for?)

Shortcuts are global while the element it should be attached to is null

I'm submitting a...

[ ] Regression (a behavior that used to work and stopped working in a new release)
[x] Bug report  
[ ] Performance issue
[ ] Feature request
[ ] Documentation issue or request
[ ] Other... Please describe:

Current behavior

Imagine you want to attach keyboard shortcuts to a specific element. But that element is not part of the DOM initially (e.g because it's loading). So the ref object that's passed to useHotkeys has { current: null }. Currently, this makes the shortcuts global.

Expected behavior

I would expect the keyboard shortcuts to only be attached to the element I am providing. And so they should be disabled when the element doesn't exist.

Minimal reproduction of the problem with instructions

https://stackblitz.com/edit/react-ts-tzrezy?file=App.tsx

1. In this reproduction, a keyboard shortcut is attached to an element that is not shown initially
2. While the element is not shown, press the keyboard shortcut: it works globally.

What is the motivation / use case for changing the behavior?

This one shouldn't be too hard to fix, it's just a matter of making the difference between:

• { ref: undefined } -> global
• { ref: { current: null } } -> disabled, element is null
• { ref: { current: HTMLElement } } -> attached to element

Environment

Libs:
- react version: latest
- reakeys version: latest


Browser:
- [x] Chrome (desktop) version XX
- [ ] Chrome (Android) version XX
- [ ] Chrome (iOS) version XX
- [ ] Firefox version XX
- [ ] Safari (desktop) version XX
- [ ] Safari (iOS) version XX
- [ ] IE version XX
- [ ] Edge version XX
 
For Tooling issues:
- Node version: XX  
- Platform:  

Others:

Disable global shortcuts / shortcuts from parent components

I'm submitting a...

[ ] Regression (a behavior that used to work and stopped working in a new release)
[ ] Bug report  
[ ] Performance issue
[x] Feature request
[ ] Documentation issue or request
[ ] Other... Please describe:

Current behavior

It's currently impossible to disable existing keybindings- for example, this:

{
	ref: menuRef,
	name: '',
	keys: ['*'],
	callback: () => false
}

This won't prevent parents' shortcuts from triggering when their key combo is pressed on the keyboard. This may be a limitation of Mousetrap, or maybe I'm just not using it correctly.

Expected behavior

I should be able to disable all outside keybindings

What is the motivation / use case for changing the behavior?

Headless UI uses a focus trap that will crash the application if you have more than one dialog open at a time. My context menu uses a focus trap, so if someone uses a keyboard shortcut to open a dialog, the application will crash and the entire tree will unmount. Not very fun.

Infinite loop

I'm submitting a...

[x] Regression (a behavior that used to work and stopped working in a new release)
[x] Bug report  
[ ] Performance issue
[ ] Feature request
[ ] Documentation issue or request
[ ] Other... Please describe:

Current behavior

With the new installation of Reaflow I got an infinite loop:

which happens if using useUndo or useSelection (maybe more)
After a few hours of searching, I found that the problem is with this package.
The last working version is 1.2.2

Minimal reproduction of the problem with instructions

Install reaflow - call useSelection like this -

function onDataChange(): any {}

const { selections } = useSelection({
nodes: [],
edges: [],
onDataChange,
});

Migrate off Mousetrap

Mousetrap is old and not maintained anymore. We should move off of it for NextJS support. Some alternatives:

• https://github.com/webNeat/ctrl-keys
• https://github.com/RobertWHurst/Keystrokes
• https://github.com/jamiebuilds/tinykeys
• https://github.com/jaywcjlove/hotkeys-js

Key features we are using in mousetrap ( beyond simple binding ):

• Meta/CMD/CTRL shortcuts
• Focus based shortcuts on elements
• Inputs don't trigger hotkeys