react-text-annotation v0.1.3

Text Annotator (Live Demo):

This is a React Text Annotation component, written in TypeScript and supporting JavaScript implementation. It's designed to be styling framework-agnostic (compatible with Tailwind, Styled Components, etc.), with the aim of ensuring reliability for production use and cross-browser compatibility, easy to use, covering many use cases.

Install:

npm i react-text-annotation@latest

Example of use (JS/Tailwind):

import { useState, useMemo } from 'react';
import { TextAnnotator } from 'react-text-annotation';

export default function Home() {
  const categories = useMemo(() => [{ id: 0, color: "#FF8282", name: 'Not Allowed' }, { id: 1, color: "#FFAF82", name: 'Vehicle' }], []);
  
  const [annotations, setAnnotations] = useState([]);
  const [selectedCategory, setSelectedCategory] = useState(categories[0]);

  const handleAnnotate = (annotation) => {
    setAnnotations(annotation)
  }

  return (
      <TextAnnotator
        containerClassNames="cursor-auto flex-grow p-2.5 space-x-[2] [word-spacing:2px] leading-[30px] -ml-2.5 whitespace-pre-wrap h-full"
        markerClassName="p-1 relative cursor-pointer hover:after:[content:'x'] hover:after:font-bold hover:after:text-xs hover:after:text-black hover:after:whitespace-nowrap hover:after:top-0 hover:after:leading-3 hover:after:left-0 hover:after:absolute hover:after:z-10 hover:after:w-3 hover:after:bg-white hover:after:text-center hover:after:opacity-50"
        value={annotations}
        onChange={handleAnnotate}
        content={'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, nunc at aliquet pharetra, sem nulla condimentum augue, id pulvinar nunc nisl et mi. Sed auctor, nunc in cursus tincidunt, sem nunc cursus nibh, a cursus mi lorem in libero. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec eget risus diam. Sed non neque elit. Sed ut imperdiet nisi. Proin condimentum fermentum nunc. Etiam pharetra, erat sed ferment'}
        category={selectedCategory}
      />
  );
}

Example of use (TS/Styled Component):

import { useState, useMemo } from 'react';
import { TextAnnotator, Annotation, Category } from 'react-text-annotation';

const Container = styled.div`
  cursor: auto;
  flex-grow: 1;
  padding: 10px;
  word-spacing: 2px;
  line-height: 30px;
  margin-left: -10px;
  white-space: pre-wrap;
  height: 100%;
  & mark {
    padding: 4px;
    position: relative;
    cursor: pointer;
    &:hover:after {
      font-size: 8px;
      color: #000;
      white-space:nowrap;
      top: 0;
      line-height: 11px;
      left: 0;
      position: absolute;
      content: 'x';
      font-weight: bold;
      z-index: 11;
      width: 11px;
      background: white;
      text-align: center;
      opacity: 0.5;
    }
  }
`;

export default function Home() {
  const categories = useMemo(() => [{ id: 1, color: "#FFAF82", name: 'Vehicle' },{ id: 2, color: "#FFD482", name: 'Airplane' }], []);
  
  const [annotations, setAnnotations] = useState<Annotation[]>([]);
  const [selectedCategory, setSelectedCategory] = useState<Category>(categories[0]);

  const handleAnnotate = (annotation: Annotation) => {
    setAnnotations(annotation)
  }

  return (
    <Container>
        <TextAnnotator
          value={annotations}
          onChange={handleAnnotate}
          content={"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, nunc at aliquet pharetra, sem nulla condimentum augue, id pulvinar nunc nisl et mi. Sed auctor, nunc in cursus tincidunt, sem nunc cursus nibh, a cursus mi lorem in libero. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec eget risus diam. Sed non neque elit. Sed ut imperdiet nisi. Proin condimentum fermentum nunc. Etiam pharetra, erat sed ferment"}
          category={selectedCategory}
        />
    </Container>
  );
}

Properties explained:

Annotation Object:

This object is used to collect all the selected annotations from the text.

{ start: 0, end: 0, text: "", category: { id: 0, color: "" } }

Category Object:

This object is used to determine how to label the current selection. If you want to label your text as "elephant", you should tell the text annotator that you are labeling elephants. On top of that, it is important for the annotator to understand what is the identifier for elephants so you can later map the annotations with your internal data. Therefore, the object contains the following:

{ id: 0, color: "" }

Contribution

Your contributions, whether through creating issues or submitting pull requests, are invaluable to me. Rest assured, I'll be actively engaged and readily available to provide support and guidance every step of the way. Let's collaborate, innovate, and build something amazing together! Remember, no contribution is too small – every effort counts. Looking forward to seeing your ideas and contributions flourish! 🚀✨

Credits

Originally inspired by Martin Camacho's react-text-annotate and served as the foundation of the component while I was working on Human Lambdas project, neither of which are currently maintained. However, I've given it a makeover to meet the standards we were aiming for.

My motivation behind building this component was to create an annotation tool that is production-ready, thoroughly tested, and ready for immediate use. I've been promising myself I'd set it free into the wild one day, and guess what? That day has finally arrived! It's out in the world now, ready to shine!