https://github.com/localjo/react-tater

A React component to add annotations to any element on a page 🥔
https://github.com/localjo/react-tater

annotations emoji react

Last synced: 1 day ago
JSON representation

A React component to add annotations to any element on a page 🥔

• Host: GitHub
• URL: https://github.com/localjo/react-tater
• Owner: localjo
• License: mit
• Created: 2020-04-13T09:48:23.000Z (almost 5 years ago)
• Default Branch: master
• Last Pushed: 2022-12-12T11:55:40.000Z (about 2 years ago)
• Last Synced: 2025-01-24T07:06:03.091Z (9 days ago)
• Topics: annotations, emoji, react
• Language: JavaScript
• Homepage: https://iamlocaljo.com/react-tater-demo/
• Size: 4.59 MB
• Stars: 244
• Watchers: 3
• Forks: 11
• Open Issues: 21
• Metadata Files:
  • Readme: README.md
  • Funding: .github/FUNDING.yml
  • License: LICENSE

Awesome Lists containing this project

README

        
# `react-tater` 🥔

> A React component to add annotations to any element on a page

![Screenshot](./screenshot.png)

[![NPM](https://img.shields.io/npm/v/react-tater.svg)](https://www.npmjs.com/package/react-tater)

## Install

```bash

yarn add react-tater

```

## Usage

```jsx

import React from 'react';

import Tater from 'react-tater';

import YourElement from './your-element';

const taterOptions = {

  name: 'your-element-1', // The namespace used for local storage

  space: 30 // The size, in pixels, of the grid and emojis

};

const App = () => (

  <>

    

       {/* any element you want to annotate */}

    

  >

);

```

## Development

If you want to make changes to this library in a local development environment,

first you need to symlink some packages:

```bash

cd ../example-app/node_modules/react && yarn link

cd react-tater && yarn link && yarn link react

cd ../example-app && yarn link react-tater

```

This allows you to see changes to this package immediately in your example app

and prevents the example app from seeing more than one copy of React.

Then start the dev server which will build the module and watch for changes to

automatically rebuild:

```bash

cd react-tater && yarn start

```

Then add `import Tater from 'react-tater';` to your example project to use it.

To run tests:

```bash

cd react-tater && yarn test

```

Or:

```bash

cd react-tater && yarn test:watch

```