red-arrow

1.0.3 • Public • Published

Red Arrow npm install red-arrow code sandbox gzip size

Display a nice looking red arrow pointing to the element you reference in React (see Codesandbox):

import React, { useRef } from 'react';
import RedArrow from 'red-arrow';
 
export default () => {
  const ref = useRef();
  return (
    <div>
      <button ref={ref}>Click me!</button>
      <RedArrow point={ref} />
    </div>
  );
};

Another example:

the red arrow

API

It is exported as a default export, and can accept these properties:

  • point (ref): the reference to the element we want to point to.
  • rotation (number): the angle to rotate the arrow in degrees. Defaults to 45.
  • color="red" (str):
  • offset={{ left: '20px', top: '2px' }} (obj|fn): the offset from the bottom-left of the element. Defaults to { left: '20px', top: '2px' } because it looks good.

FAQ

What if I want a BLUE arrow??

Just write it <RedArrow color="blue" />! Oh wait a second...

Is this a joke?

Yes, pretty much. It is inspired by a tweet. But it works!

How long did it take?

~30min~ ~40min~ 50min

But wait you just did publish it!

Yes?

Versions

Current Tags

VersionDownloads (Last 7 Days)Tag
1.0.31latest

Version History

VersionDownloads (Last 7 Days)Published
1.0.31
1.0.20
1.0.10
1.0.00
0.1.00

Package Sidebar

Install

npm i red-arrow

Weekly Downloads

1

Version

1.0.3

License

MIT

Unpacked Size

7.1 kB

Total Files

4

Last publish

Collaborators

  • franciscop