Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/art29/react-image-pin
React Image Pin is a small React library made to be able to add pins to images. This can be used for maps, cards and more!
https://github.com/art29/react-image-pin
library npm react vite
Last synced: about 1 month ago
JSON representation
React Image Pin is a small React library made to be able to add pins to images. This can be used for maps, cards and more!
- Host: GitHub
- URL: https://github.com/art29/react-image-pin
- Owner: art29
- License: agpl-3.0
- Created: 2024-01-27T22:29:06.000Z (10 months ago)
- Default Branch: main
- Last Pushed: 2024-10-07T18:37:22.000Z (about 1 month ago)
- Last Synced: 2024-10-10T06:48:59.302Z (about 1 month ago)
- Topics: library, npm, react, vite
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/react-image-pin
- Size: 1.17 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# React Image Pin
React Image Pin is a small React library made to be able to add pins to images. This can be used for maps, cards and more!
This got inspired by this library: https://github.com/galexandrade/react-image-marker.
## Installation
Install via yarn or npm
```bash
# Yarn
yarn add react-image-pin
# NPM
npm install react-image-pin
```
## Props
| Prop | Type | Default | Required | Description |
| ------------------ | ------------------ | ------- | -------- | ------------------------------------------------------------------------------------------------ |
| image | string | - | Yes | The source of the image |
| imageAlt | string | 'Image' | No | The alternative text for the image |
| pins | ImagePin[] | `[]` | No | An array of pin objects. Each object should have `positionX`, `positionY`, and `id` properties |
| customPinComponent | React.ReactElement | - | No | A custom component to be used as the pin |
| onNewPin | function | - | No | A function that is called when a new pin is added. It receives the new pin object as an argument |
## Usage
First, import the `ImagePinContainer` component from the library:
```typescript jsx
{ ImagePinContainer } from 'react-image-pin';
```
Then, use it in your component:
```typescript jsx
import Image from './image.png';
console.log(pin)}
```
## Custom Pin Component
You can use a Custom Pin Component! This can be very useful if you want to do special actions on click, change the style and more!
## Contributing
Pull requests are welcome! For major changes, please open an issue first to discuss what you would like to change.
## License
AGPL-3.0 (See LICENSE.md for more information)