Learn about our RFC process, Open RFC meetings & more.Join in the discussion! »

markster

0.0.2 • Public • Published

markster2

Built With Stencil

Markster: a web component for highlighting text.

Examples

TSX

import { Component, h, Host } from '@stencil/core';
import 'markster';
 
@Component({
  tag: 'my-component'
})
export class MyComponent {
 
  render() {
    return <Host>
      <mark-ster 
      text={'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque porta eros nibh, a iaculis nisl congue vitae.'} 
      searchWords={'ipsum iaculis elit'} />
    </Host>;
  }
}
 

HTML

<script src='https://unpkg.com/markster@latest/dist/markster.js'></script>
 
<mark-ster 
      text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque porta eros nibh, a iaculis nisl congue vitae." 
      search-words="ipsum iaculis elit"></mark-ster>

Using this component

Script tag

  • Put a script tag similar to this <script src="https://unpkg.com/markster@latest/dist/markster.js"></script> in the head of your index.html
  • Then you can use the element anywhere in your template, JSX, html etc

In a stencil project

  • Run npm install markster --save
  • Add an import to the npm package import 'markster';
  • Then you can use the element anywhere in your stencil project.

Keywords

none

Install

npm i markster

DownloadsWeekly Downloads

51

Version

0.0.2

License

MIT

Unpacked Size

661 kB

Total Files

81

Last publish

Collaborators

  • avatar