@skeynetwork/accessibility-widget

v0.0.22

Published

19 days ago

Accessibility widet for react apps. See props section for widget configuration. Install with:

0High
0Medium
0Low

fathermatthew

skey.network

tom-stan-skey

Getting started with react app

Accessibility widet for react apps. See props section for widget configuration. Install with:

npm install --save @skeynetwork/accessibility-widget

Example usage:

import "@skeynetwork/accessibility-widget/css";
import { Widget } from "@skeynetwork/accessibility-widget";

const App = () => {
  return (
    <div className="app">
      <Widget />
    </div>
  );
};

Getting started with pure html/css

Download newest release files from https://github.com/skey-network/accessibility-widget/releases

Copy .js and .css files to site public directory.

<head>
  <!-- ... Head content -->

  <link rel="stylesheet" href="accessibility-widget.css" />
</head>
<body>
  <!-- ... Body content -->

  <div class="accessibility"></div>

  <script src="accessibility-embed.js"></script>
  <script>
    window.addEventListener("DOMContentLoaded", () => {
      window.AccessibilityButton.mount(document.querySelector(".accessibility"), {});
    });
  </script>
</body>

Development

Available scripts

dev - Start vite development environment
build:lib - Build widget ready for react sites
build:embed - Build widget ready for static sites
prepare - Run husky command
publish:github - Create github release

How to run widget in dev mode

Set correct node version

nvm i

Install dependencies

yarn

Run dev build

yarn run dev

Building for react pages

Set react and react-dom versions to match your project's versions
Run build command

yarn run build:lib

You should see this in dist/lib/

./dist/lib/
├── accessibility.cjs.js
├── accessibility.es.d.ts
├── accessibility.es.js
└── accessibility-widget.css

Copy dist/lib/ directory into your project's src/ and rename it to your liking
Import Widget and use it!

import "src/accessibility/accessibility.css";
import { Widget } from "src/accessibility/accessibility.es";

const App = () => {
  return (
    <div className="app">
      <Widget />
    </div>
  );
};

Building for static pages

Run build command

yarn run build:embed

You should see this in dist/embed/

./dist/embed/
├── accessibility-embed.js
└── accessibility-widget.css

Copy content of dist/embed/ into your page location
Initalize component

<link rel="stylesheet" href="accessibility-widget.css" />

<div class="accessibility"></div>

<script src="accessibility-embed.js"></script>
<script>
  window.addEventListener("DOMContentLoaded", () => {
    window.AccessibilityButton.mount(document.querySelector(".accessibility"), {});
  });
</script>

Props

Button props are following this scheme

{
  colors?: {
    bg?: string;
    fg?: string;
    theme?: string;
    font?: string;
  };
  brand?: "CARUMA" | "GO2NFT" | "SKEY";
  paths?: string[];
  customPosition?: {
    horizontalPos: "left" | "right";
    verticalPos: "top" | "bottom";
    horizontal: string;
    vertical: string;
    horizontalFlip?: "auto" | boolean;
    verticalFlip?: "auto" | boolean;
  }
}

Default params:

{
  colors: {
    // Default colors are based on brand
    bg: "#F1EFED";
    fg: "#F5F5F5";
    theme: "#0033FF";
    font: "#282C3E";
  }
  brand: "CARUMA";
  paths: ["*"];
  customPosition: {
    horizontalPos: "left";
    verticalPos: "bottom";
    horizontal: "1em";
    vertical: "2em";
    horizontalFlip: "auto";
    verticalFlip: "auto";
  }
}

Paths param accept any of theese formats:

/path/
/path
path/
path

They will all work for pages like:

http://example.com/path
http://example.com/foo/path

If you only want this to work for pages like in example 1:

:/path/
:/path

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme