/reveal-highlight

Reveal Highlight Component of Axiom Design System for the Web.

Primary LanguageTypeScriptMIT LicenseMIT

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