@interacta/css-labels
TypeScript icon, indicating that this package has built-in type declarations

0.1.2 • Public • Published

CSS Labels

Renders HTML labels with built-in intersection logic.

Quick Start

Install the package:

npm install @interacta/css-labels

Create HTML div element and render labels:

import { LabelRenderer } from '@interacta/css-labels'

const div = document.querySelector('#labels')  
const renderer = new LabelRenderer(div)

renderer.setLabels([
  { id: 'monster', text: '👾', x: 100, y: 50, opacity: 1 },
  { id: 'alien', text: '👽', x: 50, y: 150, opacity: 1 },
  { id: 'ufo', text: '🛸', x: 150, y: 150, opacity: 1 },
])
renderer.draw()

Or create single Css label:

import { CssLabel } from '@interacta/css-labels'
const div = document.querySelector('#labels')

const label = new CssLabel(div, '🐣')
label.setPosition(100, 110)
label.setVisibility(true)
label.setOpacity(1)
label.draw()

Readme

Keywords

none

Package Sidebar

Install

npm i @interacta/css-labels

Weekly Downloads

1,003

Version

0.1.2

License

MIT

Unpacked Size

62.5 kB

Total Files

32

Last publish

Collaborators

  • rokotyan
  • stukova