@ax-design/reveal-highlight - npm Package Compare versions

Comparing version 0.1.0 to 0.1.1

package.json

 {
     "name": "@ax-design/reveal-highlight",
-    "version": "0.1.0",
+    "version": "0.1.1",
     "description": "Web component that implement Reveal Highlight of Axiom Design System.",
@@ -5,0 +5,0 @@ "main": "build/main.js",

README.md

 <h1 align="center">
-  <img src="https://raw.githubusercontent.com/ax-design/reveal-highlight-react/master/docs/logo.png" alt="Reveal Hightlight">
+  <img src="https://raw.githubusercontent.com/ax-design/reveal-highlight/master/docs/logo.png" alt="Reveal Hightlight">
 </h1>
@@ -10,5 +10,12 @@
 <p align="center">
-  <img src="https://raw.githubusercontent.com/ax-design/reveal-highlight-react/master/docs/screen-record.gif" alt="Screenshot">
+  <a href="https://www.npmjs.com/package/@ax-design/reveal-highlight"><img src="https://img.shields.io/npm/v/@ax-design/reveal-highlight.svg" alt="npm version"></a>
+  <a href="https://travis-ci.org/ax-design/reveal-highlight"><img src="https://travis-ci.org/ax-design/reveal-highlight.svg?branch=master" alt="CI Status"></a>
+  <img src="https://img.shields.io/badge/license-MIT-green.svg" alt="MIT Licence" />
+
 </p>
 
+<p align="center">
+  <img src="https://raw.githubusercontent.com/ax-design/reveal-highlight/master/docs/screen-record.gif" alt="Screenshot">
+</p>
+
 ## Installation
@@ -18,6 +25,6 @@
 // with npm
-npm install @ax-design/reveal-highlight-react
+npm install @ax-design/reveal-highlight
 
 // with yarn
-yarn add @ax-design/reveal-highlight-react
+yarn add @ax-design/reveal-highlight
 ```
@@ -27,111 +34,102 @@
 
-To add a reveal effect on your web application, you need to wrap a `RevealHighlight` component with `RevealHighlightProvider` and `RevealHighlightBoundary`.
+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`.
 
-`RevealHighlightProvider` will manage the global reveal style, and cache the rendered highlight bitmap for better performance (WIP).
+`ax-reveal-provider` will manage the global reveal style, and cache the rendered highlight bitmap for better performance (WIP).
 
-`RevealHighlightBoundary` will manage the rendering behavior of `RevealHighlight` 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.
+`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.
 
-Say, we wrapped a button component:
+Here's an example:
 
+```html
+<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>
 ```
-interface ButtonProps {
-  // Some magic here.
-}
 
-export Button: React.SFC<ButtonProps> = (props) => {
-  return (
-    <div>
-      <button>
-        <Reveal />
-        {props.children}
-      </button>
-    </div>
-  );
-}
-```
+## Style Controlling
 
-And, we'll use it in another component:
+reveal-highlight use custom properties to manage the style of highlights
 
-```
-export interface AppProps {
+### --reveal-color
 
-}
+**Type:** `<color>`
 
-const App: React.FC<AppProps> = () => {
+**Default:** `rgb(0, 0, 0)`
 
-  return (
-    <RevealProvider>
-      <RevealBoundary>
-        <div>
-          <Button>Hello</Button>
-          <Button>World!</Button>
-        </div>
-      </RevealBoundary>
-    </RevealProvider>
-  );
-}
-```
+**Description:** The color of the reveal highlight.
 
-## API Document
+### --reveal-border-style
 
-### `RevealHighlightProvider`
+**Type:** `'full' | 'half' | 'none'`
 
-No props needed.
+**Default:** `'full'`
 
-### `RevealHighlightBoundary`
+**Description:** If `full` provided, there'll be four sides of the element will have a light effect, if `half` provided, only the top and bottom side will have a light effect, `none` literally no border.
 
-No props needed.
+### --reveal-border-width
 
-### `RevealHighlight`
+**Type:** `<number>`
 
-#### color
+**Default:** `1`
 
-**Type:** `string`
+**Description:** Border width in `px`.
 
-**Default:** `'0, 0, 0'`
+### --reveal-fill-mode
 
-**Description:**  The color of the reveal highlight. the string should contain color information in "RGB" format, separated by a comma.
+**Type:** `'relative' | 'absolute' | 'none'`
 
-#### borderStyle
+**Default:** `relative`
 
-**Type:** `'full' | 'half' | 'none'`
+**Description:** How the program calculating the radius of gradient, if `relative` provided, gradient radius will be:
 
-**Default:** `'full'`
+-   `r(border) = min(width, height) * fillRadius`
+-   `r(fill) = max(width, height) * fillRadius`
 
-**Description:**  If `full` provided, there'll be four sides of the element will have a light effect, if `half` provided, only the top and bottom side will have a light effect, `none` literally no border.
+If `absolute` provided, gradient will be:
 
-#### borderWidth
+-   `r(border) = fillRadius`
+-   `r(fill) = illRadius`
 
-**Type:** number
+the unit is pixel.
 
-**Default:** `1`
+If `none` provided, nothing will happen, you won't need this option.
 
-**Description:**  Border width in `px`.
+### --reveal-fill-radius
 
-#### fillMode
+**Type:** `<number>`
 
-**Type:** `'relative' | 'absolute' | 'none'`
+**Default:** `1.5`
 
-**Default:** `relative`
+**Description:** Radius of the highlight gradient.
 
-**Description:**  How the program calculating the radius of gradient, if `relative` provided, gradient radius will be:
+### --reveal-diffuse
 
-* `r(border) = min(width, height) * fillRadius`
-* `r(fill) = max(width, height) * fillRadius`
+**Type:** `<boolean>`
 
-If `absolute` provided, gradient will be:
+**Default:** `true`
 
-* `r(border) = fillRadius`
-* `r(fill) = illRadius`
+**Description:** Control the behavior while pointer not in the reveal highlight element, if setted to `false`, nothing will be rendered; if setted to `true`, border will be rendered.
 
-the unit is pixel.
+### --reveal-animate-speed
 
-If `none` provided, nothing will happen, you won't need this option.
+**Type:** `<number>`
 
-#### fillRadius
+**Default:** `2000`
 
-**Type:** number
+**Description:** The duration of the animation being played when the mouse is held down by the element.
 
-**Default:** `1.5`
+### --reveal-animate-speed
 
-**Description:**  Radius of the highlight gradient.
+**Type:** `<number>`
+
+**Default:** `6`
+
+**Description:** The acceleration rate of the animation when the mouse is released.

src/index.ts

@@ -55,5 +55,5 @@ import { AxRevealProvider, AxRevealBoundary, AxReveal } from './CustomElements.js';
             inherits: true
-        });  
+        });
     }
 
 }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

1427382

increased by0.04%

Worsened metrics

Number of lines in readme file

132

decreased by-2.22%

No dependency changes