https://github.com/franciscop/red-arrow

Draws a red arrow in React
https://github.com/franciscop/red-arrow

Last synced: 13 days ago
JSON representation

Draws a red arrow in React

• Host: GitHub
• URL: https://github.com/franciscop/red-arrow
• Owner: franciscop
• License: mit
• Created: 2020-02-06T15:02:32.000Z (almost 5 years ago)
• Default Branch: master
• Last Pushed: 2020-02-06T15:37:39.000Z (almost 5 years ago)
• Last Synced: 2024-10-04T12:15:16.498Z (about 1 month ago)
• Language: JavaScript
• Size: 77.1 KB
• Stars: 5
• Watchers: 3
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: readme.md
  • Funding: .github/FUNDING.yml
  • License: LICENSE

Awesome Lists containing this project

README

        
# Red Arrow [![npm install red-arrow](https://img.shields.io/badge/npm%20install-red--arrow-blue.svg)](https://www.npmjs.com/package/red-arrow) [![code sandbox](https://img.shields.io/badge/%20DEMO%20%20-blue.svg)](https://codesandbox.io/s/brave-robinson-gmpz8) [![gzip size](https://img.badgesize.io/franciscop/red-arrow/master/index.min.js.svg?compression=gzip)](https://github.com/franciscop/red-arrow/blob/master/index.min.js)

Display a *nice looking* red arrow pointing to the element you reference in React ([see **Codesandbox**](https://codesandbox.io/s/brave-robinson-gmpz8)):

```js

import React, { useRef } from 'react';

import RedArrow from 'red-arrow';

export default () => {

  const ref = useRef();

  return (

    


      Click me!

      

    

  );

};

```


Another example:

![the red arrow](./docs/example.png)

## 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 ``! Oh wait a second...

**Is this a joke?**

Yes, pretty much. It is [inspired by a tweet](https://twitter.com/freezydorito/status/1225110867995451394). But it works!

**How long did it take?**

~30min~ ~40min~ 50min

**But wait you just did publish it!**

Yes?