A labeler component that Lays out text and overlays textual decorations like labels, predictions, and relations based on given data and handles user interactions on tokens.

Overview

react-text-annotator

react-text-annotator is a labeler component that:

  • Lays out text and overlays textual decorations like labels, predictions, and relations based on given data.
  • Handles user interactions on tokens.
  • Is extensible to allow for custom rendering of tokens and decoration overlays.
  • Is accessible to use with full keyboard interactions.

This labeler is character tokenized, meaning that it will break all text sent in its props to character level tokens. Tokens are split to lines based on line breaks in the original text and the maximum number of characters allowed in each line. The labeler also ensures that contiguous words in the original text are not split across multiple lines.

Examples

Here are some example of how to use the labeler component:

    const annotations: AnnotationData[] = [
        {
            id: 'id1',
            color: 'red',
            endToken: 15,
            startToken: 5,
            name: 'label',
            kind: 'label'
        },
        {
            id: 'id2',
            color: 'blue',
            endToken: 25,
            startToken: 10,
            name: 'relation',
            kind: 'relation'
        }
    ];

    const labelerText = 'This is sample text to test the labeler functionality.';

    return <Labeler text={labelerText} annotations={annotations} />;

the result is:

result-1


 const annotations: AnnotationData[] = [
        {
            id: 'id1',
            color: 'red',
            endToken: 15,
            startToken: 2,
            name: 'label',
            kind: 'label'
        }
    ];

    const labelerText = `اسمي محمد و اعمل لدى شركة ميكروسوفت`;

    return <Labeler text={labelerText} annotations={annotations} labelerConfigs={{ isRtl: true, tokenizationType: 'word' }} />;

the result is:

result-2

You might also like...
React component to create graphic user interface with: - draggable nodes with ports and edges on a directed graph editor

React component to create graphic user interface with: - draggable nodes with ports and edges on a directed graph editor. - extensibility to customize the widgets or behaviors. - accessbility and testability support

🌀 React library to safely render HTML, filter attributes, autowrap text with matchers, render emoji characters, and much more.

Interweave Interweave is a robust React library that can... Safely render HTML without using dangerouslySetInnerHTML. Safely strip HTML tags. Automati

Ringcentral React Component library, make your app have the same user experience as Ringcentral Apps.

Juno Ringcentral React Component library, make your app have the same user experience as Ringcentral Apps. base on MATERIAL-UI. Explore Juno with the

Draw a scribbly underline underneath some text in React
Draw a scribbly underline underneath some text in React

UnderlineEmphasis This component draws a purple squiggly underline underneath whatever text children are passed in. Package uses tsdx as the build sys

React component for building split views like in VS Code
React component for building split views like in VS Code

Splitter Splitter is a React component that allows you to split views into resizable panels. Similar to tabs in Visual Studio Code, for example. It's

A simple Tinder like swipe component for swiping cards
A simple Tinder like swipe component for swiping cards

A simple Tinder like swipe component for swiping cards.

A React Higher Order Component library to assign class names to components, looks like styled-components

Claas A React Higher Order Component library to assign classNames to components, looks like styled-components Why I always liked to use Tailwind and w

Use react component in vue 3 and data binding.

Vue React Wrapper Status: Alpha A wrapper of react component, use react component in vue quickly. Why As we all know, Vue 3 is becoming more and more

An opinionated UI Workbench featuring tools like react, styled components, typescript, webpack, jest and storybook all bundled into an easy to use interface

An opinionated UI Workbench featuring tools like react, styled components, typescript, webpack, jest and storybook all bundled into an easy to use interface

Comments
  • Todo items for labeler

    Todo items for labeler

    Some todo items! :)

    High priority items

    • Thorough documentation on the configuration props the labeler exposes.
    • Thorough documentation on how to extend the labeler renderers and tokenizers with examples.
    • Host a small app service containing a well designed demo page with example labeler usages.
      • With each example, add a short snippet of the code that enabled it to be.
      • Examples can be:
        • Happy scenario; English text with some labels, predictions, and relations.
        • Full document with labels, predictions and with virtualization enabled.
        • Showcase language support: Character tokenized languages (Ex: CJK) and RTL (Ex: Arabic)
        • Showcase rendering extensibility capabilities:
    • The docs folder should be on the top level of the repo.
    • The ReadMe file should organize the docs, many developers are interested in the architecture of tools.
      • You can even create a GitHub IO page for the labeler in the future 😍

    Medium priority items:

    • There is a luisAppSettings.js file. How is that relevant to the labeler? It contains configs for language services. It should be removed? If it is there for reason, I recommend a more generic name relevant to the labeler.
    • The setupJest file contains configs that are not relevant to the labeler. Please remove them, ensuring only those for the labeler tests are included.
    • Is the public folder there on purpose? If it is not, remove it.
      • If it is, it is actually a good idea to add code for a small app that users can run locally if they download the repo or fork it. Make sure this small app is excluded from the NPM package that gets installed though.
    opened by omarsourour 1
Owner
Microsoft
Open source projects and samples from Microsoft
Microsoft
🎁 Custom Input Text React - An Editable text input component for react.

?? Custom Input Text React - An Editable text input component for react.

Farsab B 1 Jun 4, 2022
A very simple component that allows you to add ellipsis to your texts when you do not want to display the entire text with the possibility of displaying the entire text

A very simple component that allows you to add ellipsis to your texts when you do not want to display the entire text with the possibility of displaying the entire text

Sebastian Korotkiewicz 2 Apr 17, 2022
fitfab user interface experience is a collection of React components and utilities for building user interfaces using web api technologies

fitfab user interface experience is a collection of React components and utilities for building user interfaces using web api technologies. (and of course, Reactjs.)

Miguel Julio 1 Jun 1, 2022
This is a react component which made your text does not wrap and dynamically adjust the font size.

react-dynamic-font This is a react component which made your text does not wrap and dynamically adjust the font size Sometimes we want some text to ha

Zhao 33 Aug 30, 2022
A React component for interactively highlighting parts of text.

A React component for interactively highlighting parts of text.

Martin Camacho 116 Nov 21, 2022
React text ellipsify component

react-ellipsis-text Demo View Demo Installation npm install --save react-ellipsis-text API EllipsisText Props EllipsisText.propTypes

Mobilus Corporation 29 Jul 26, 2022
React component for automatically sized text that fits in its parent

Occamy Text Occamy is choranaptyxic, meaning it will grow or shrink to fit available space -- Fantastic Beasts and Where to Find Them React component

Dario Carella 8 Oct 11, 2019
Text highlighting component for react applications

Text highlighting component for react applications

Vladyslav Kapkan 1 Apr 4, 2022
🎭 A React Native and Expo library to mask text and inputs

This is a library to mask Text and Input components in React Native and Expo (Android, iOS and Web).

Akinn Rosa 290 Dec 2, 2022
Periqles is a React component library for Relay and Apollo that makes it easy to collect user input.

periqles Painless forms for GraphQL. Demo → Periqles is a React component library for Relay and Apollo that makes it easy to collect user input. Periq

OSLabs Beta 123 Nov 14, 2022