Never Play Matchmaker

    markster
    TypeScript icon, indicating that this package has built-in type declarations

    1.0.0 • 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.

    Install

    npm i markster

    DownloadsWeekly Downloads

    617

    Version

    1.0.0

    License

    MIT

    Unpacked Size

    661 kB

    Total Files

    81

    Last publish

    Collaborators

    • adamlacombe