Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 1,000,000+ packages pre-installed, including react-tater with all npm packages installed. Try it out:

require("react/package.json"); // react is a peer dependency. var reactTater = require("react-tater")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

react-tater v2.1.2

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

react-tater 🥔

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

Screenshot

NPM

Install

yarn add react-tater

Usage

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 = () => (
  <>
    <Tater options={taterOptions}>
      <YourElement /> {/* any element you want to annotate */}
    </Tater>
  </>
);

Development

If you want to make changes to this library in a local development environment, first you need to symlink some packages:

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:

cd react-tater && yarn start

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

To run tests:

cd react-tater && yarn test

Or:

cd react-tater && yarn test:watch

Metadata

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free