open-index/open-npm huggingface dataset:
npm package: @recogito/react-pdf-annotator
Description: React bindings to the Recogito PDF annotator
Author: Rainer Simon
Latest version: 1.6.0

# Recogito React PDF Annotator

## Installation

```sh
npm install @recogito/pdf-annotator @annotorious/react @recogito/react-pdf-annotator
```

## Quick Start

```jsx
import { Annotorious } from '@annotorious/react';
import { PDFAnnotator } from '@recogito/react-pdf-annotator';

export const App = () => {

  return (
    <Annotorious>
      <PDFAnnotator 
        pdfUrl="compressed.tracemonkey-pldi-09.pdf" />
    </Annotorious>
  )

}
```

## Selection Popup

The `TextAnnotationPopup` from the Recogito Text Annotator package is fully compatible with the PDF annotator.

```jsx
import { Annotorious } from '@annotorious/react';
import { PDFAnnotator } from '@recogito/react-pdf-annotator';
import { TextAnnotationPopup } from '@recogito/react-text-annotator';

export const App = () => {

  return (
    <Annotorious>
      <PDFAnnotator 
        pdfUrl="compressed.tracemonkey-pldi-09.pdf" />

      <TextAnnotationPopup
          asPortal
          popup={props => (<div>Hello World</div>)} />
    </Annotorious>
  )

}
```

## Hooks

The PDF annotator supports all Annotorious hooks, exactly [like the text annotator](https://github.com/recogito/text-annotator-js/tree/main/packages/text-annotator-react#hooks).
npm package: @recogito/recogito-client-core
Description: Core functions, classes and components for RecogitoJS
Author: Rainer Simon
Latest version: 1.7.9

# recogito-client-core

Core functions, classes and components for [RecogitoJS](https://github.com/recogito/recogito-js), 
[Annotorious](https://github.com/recogito/annotorious) and [Annotorious OpenSeadragon](https://github.com/recogito/annotorious-openseadragon).

To install `npm install @recogito/recogito-client-core`

## Contributing UI Translations

If you want to contribute UI translations to Annotorious or RecogitoJS, you've come to the right place!
In [this folder](https://github.com/recogito/recogito-client-core/tree/main/src/i18n) 
you will find `messages` files, one file for each translation. 

Each `messages` file is a dictionary of the English labels and their translations. For example, 
here's the German translation file `messages_de.json`.

```json
{
  "Add a comment...": "Kommentar schreiben...",
  "Add a reply...": "Antwort schreiben...",
  "Add tag...": "Tag...",
  "Cancel": "Abbrechen",
  "Close": "Schliessen",
  "Edit": "Bearbeiten",
  "Delete": "Löschen",
  "Ok": "Ok"
}
``` 

### To add a new translation

- Fork this repository
- Add a message file to the [src/i18n folder](https://github.com/recogito/recogito-client-core/tree/main/src/i18n) 
  named `messages_{iso}.json`, where {iso} is the 2-character ISO code of the language.
- Copy the dictionary above, and replace the translations accordingly.
- [Send a pull request](https://www.freecodecamp.org/news/how-to-make-your-first-pull-request-on-github-3/)

Many thanks in advance! If you have questions, do get in touch via the [Annotorious](https://gitter.im/recogito/annotorious) or 
[RecogitoJS](https://gitter.im/recogito/recogito-js) chat on Gitter.
npm package: @recogito/recogito-comments-mention
Description: A Recogito comment thread widget that lets you @-mention users like on Twitter
Author: srinidhirao
Latest version: 0.1.0

# Recogito Comments-Mention Widget

A Recogito comment thread widget that lets you @-mention users like on Facebook or Twitter.  

<br/>

![Screenshot](Screenshot.png)

<br/>


## Run in Development Mode

```sh
$ npm start
```

## Build Widget Distribution

```sh
$ npm run build
```

## Using the plugin

```html
<html>
  <head>
    <script src="recogito.min.js"></script>
    <script src="recogito-comments-mention.min.js"></script>
  </head>
  <body>
    <script type="text/javascript">
      (function() {

        let users = [
          {
            id: 'johndoe@apple.com',
            name: 'John'
          },
          {
            id: '1',
            name: 'Johnny'
          }
        ]

        var r = Recogito.init({
          content: 'content', 
      	  widgets: [
            { widget: recogito.CommentsMention, userSuggestions: users }
          ]
        });
      })();
    </script>
  </body>
</html>
```
npm package: @recogito/recogito-connections
Description: A plugin for drawing connections between annotations
Author: Rainer Simon
Latest version: 0.1.11

# Recogito Connections

A plugin to enable drawing of connections between annotations.

![Animated screenshot of Recogito Connections in action](screenshot.gif)

## Usage

Import via __script__ tag:

```html
<script src="https://cdn.jsdelivr.net/npm/@recogito/recogito-connections@latest/dist/recogito-connections.js"></script>
```

```js
window.onload = function() {
  var r = Recogito.init({
    content: 'content'
  });

  var connections = recogito.Connections(r);

  // Load highlights and connections
  r.loadAnnotation('annotations.w3c.json');

  connections.on('createConnection', function(c) {
    console.log('created', c);
  });
  
  connections.on('updateConnection', function(updated, previous) {
    console.log('updated', updated, previous);
  });

  connections.on('deleteConnection', function(c) {
    console.log('deleted', c);
  });
};
```

## Annotation Format

Connections are represented as standard web annotations. The difference to text highlights is that
the `target` property of connection annotations points to the IDs of the two annotations it connects.
Example:

```json
{
  "@context": "http://www.w3.org/ns/anno.jsonld",
  "type": "Annotation",
  "id": "#connection-1",
  "body": [],
  "target": [
    { "id": "#highlight-1" },
    { "id": "#highlight-2" }
  ]
}
```

## Development

```sh
$ npm install
$ npm start
```
npm package: @recogito/recogito-js
Description: A JavaScript library for text annotation
Author: Rainer Simon
Latest version: 1.8.4
Deprecated: Package no longer supported. Visit https://github.com/recogito/text-annotator-js for the successor project

<p align="center">
  <br/>
  <img width="270" src="https://raw.githubusercontent.com/recogito/recogito-js/master/recogitojs-logo-small.png" />
  <br/><br/>
</p>

A JavaScript library for text annotation. Use it to add annotation functionality to a web page, or as a toolbox 
for building your own, completely custom annotation apps. Try the [online demo](https://recogito.github.io/recogito-js/)
or see the [API reference](https://github.com/recogito/recogito-js/wiki/API-Reference).

<br/>

![Screenshot](screenshot.png)

<br/>

## Installing

If you use npm, `npm install @recogito/recogito-js` and 

```javascript
import { Recogito } from '@recogito/recogito-js';

import '@recogito/recogito-js/dist/recogito.min.css';

const r = new Recogito({ content: 'my-content' });
```

Otherwise download the [latest release](https://github.com/recogito/recogito-js/releases/latest) and
include it in your web page.

```html
<link href="recogito.min.css" rel="stylesheet">
<script src="recogito.min.js"></script>
```

## Using

```html
<body>
  <pre id="my-content">My text to annotate.</pre>
  <script type="text/javascript">
    (function() {
      var r = Recogito.init({
        content: document.getElementById('my-content') // ID or DOM element
      });

      // Add an event handler  
      r.on('createAnnotation', function(annotation) { /** **/ });
    })();
  </script>
</body>
```

Full documentation is [on the Wiki](https://github.com/recogito/recogito-js/wiki). Questions? Feedack? Feature requests? Join the 
[RecogitoJS chat on Gitter](https://gitter.im/recogito/recogito-js).

[![Join the chat at https://gitter.im/recogito/recogito-js](https://badges.gitter.im/recogito/recogito-js.svg)](https://gitter.im/recogito/recogito-js?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)

## License

[BSD 3-Clause](LICENSE) (= feel free to use this code in whatever way
you wish. But keep the attribution/license file, and if this code
breaks something, don't complain to us :-)
npm package: @recogito/recogito-legacy-storage
Description: A storage adapator that works with the legacy Recogito v.3 annotation platform
Author: Rainer Simon
Latest version: 0.7.4

# Recogito Legacy Platform Storage

A storage interop plugin that makes RecogitoJS and Annotorious/AnnotoriousOSD work in 
the [legacy Recogito platform](https://github.com/pelagios/recogito2).
npm package: @recogito/recogito-react-pdf
Description: A React component for annotating PDF, powered by PDF.js and RecogitoJS
Author: Rainer Simon
Latest version: 0.8.8

# Recogito-PDF

Annotate a PDF document in React. Powered by [PDF.js](https://mozilla.github.io/pdf.js/),
[RecogitoJS](https://github.com/recogito/recogito-js) and [Annotorious](https://github.com/recogito/annotorious).

![A screenshot of the React PDF annotation component](https://github.com/recogito/recogito-pdf/raw/main/sceenshot.png)

## Using the Component

- Import the `PDFViewer` component and provide the `url` to the PDF file
- It's recommended to set a link to `pdf.worker.js` from PDF.js (copy included in folder `public`)

```js
import React from 'react';
import ReactDOM from 'react-dom';
import { pdfjs, PDFViewer } from '@recogito/recogito-react-pdf';

pdfjs.GlobalWorkerOptions.workerSrc = 'pdf.worker.js';

window.onload = function() {

  // Recogito init config (optional)
  // see https://github.com/recogito/recogito-js/wiki/API-Reference
  const config = { /* ... */ };

  // Initial annotations in W3C Web Annotation format
  const annotations = [ /* ... */ ];

  // CRUD event handlers
  const onCreateAnnotation = function () { /* ... */ };
  const onUpdateAnnotation = function () { /* ... */ };
  const onDeleteAnnotation = function () { /* ... */ };

  // Viewer mode can be "paginated" or "scrolling"
  const mode = "paginated"; 

  ReactDOM.render(
    <PDFViewer
      url="compressed.tracemonkey-pldi-09.pdf" 
      mode={mode}
      config={config} 
      annotations={annotations} 
      onCreateAnnotation={onCreateAnnotation} 
      onUpdateAnnotation={onCreateAnnotation} 
      onDeleteAnnotation={onCreateAnnotation} />,
    document.getElementById('app')
  );
    
}
```