@ax-design/reveal-highlight
    TypeScript icon, indicating that this package has built-in type declarations

    0.4.2 • Public • Published

    Reveal Hightlight

    React component that implements Reveal Highlight of Axiom Design System.

    npm version CI status DeepScan grade Telegram chat group MIT Licence

    Screenshot

    Installation

    // with npm
    npm install @ax-design/reveal-highlight
    
    // with yarn
    yarn add @ax-design/reveal-highlight

    and import it:

    //CommonJS
    require('@ax-design/reveal-highlight').register();
    
    //ESModule
    import { register } from '@ax-design/reveal-highlight';
    register({
      compat: true,
      borderDetectionMode: 'experimentalAutoFit',
    });

    Usage

    To add a reveal effect on your web application, you need to wrap a ax-reveal component with ax-reveal-provider and ax-reveal-bound.

    ax-reveal-provider will manage the global reveal style, and cache the rendered highlight bitmap for better performance (WIP).

    ax-reveal-bound will manage the rendering behavior of ax-reveal components, while your mouse enters the boundary, the highlight components will get started to rendering, while your mouse leaves the boundary component, all highlight effect will disappear.

    Here's an example:

    <ax-reveal-provider>
      <h1>Welcome to project Axiom!</h1>
      <ax-reveal-bound>
        <ax-reveal>
          <button class="ax-reveal-button">Button 1</button>
        </ax-reveal>
        <ax-reveal>
          <button class="ax-reveal-button">Button 2</button>
        </ax-reveal>
      </ax-reveal-bound>
    <ax-reveal-provider>

    Style Controlling

    Keywords

    none

    Install

    npm i @ax-design/reveal-highlight

    DownloadsWeekly Downloads

    201

    Version

    0.4.2

    License

    MIT

    Unpacked Size

    352 kB

    Total Files

    104

    Last publish

    Collaborators

    • losses
    • jackworks
    • balthild