# lit-share-modal-v3-vanilla-js

> This is a wrapper around the Lit Share Modal React package, here: https://github.com/LIT-Protocol/lit-share-modal-v3

Latest version **0.1.12** (published 2022-07-15) · 0 weekly downloads

## Install

```sh
npm install lit-share-modal-v3-vanilla-js
pnpm add lit-share-modal-v3-vanilla-js
yarn add lit-share-modal-v3-vanilla-js
bun add lit-share-modal-v3-vanilla-js
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.12 |
| Published | 2022-07-15 |
| First published | 2022-07-15 |
| Weekly downloads | 0 |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 66 |
| Unpacked size | 104.3 KB |
| Known vulnerabilities | 0 (+8 in 3 direct dependencies) |
| Install scripts | no |
| Maintainers | glitch003 |

## Links

- npm: https://www.npmjs.com/package/lit-share-modal-v3-vanilla-js
- npm.io page: https://npm.io/package/lit-share-modal-v3-vanilla-js

## Dependencies (66)

- [bfj](https://npm.io/package/bfj.md) ^7.0.2
- [jest](https://npm.io/package/jest.md) 26.6.0
- [react](https://npm.io/package/react.md) ^17.0.2
- [dotenv](https://npm.io/package/dotenv.md) 8.2.0
- [eslint](https://npm.io/package/eslint.md) ^7.11.0
- [semver](https://npm.io/package/semver.md) 7.3.2
- [ts-pnp](https://npm.io/package/ts-pnp.md) 1.2.0
- [prompts](https://npm.io/package/prompts.md) 2.4.0
- [resolve](https://npm.io/package/resolve.md) 1.18.1
- [webpack](https://npm.io/package/webpack.md) 4.44.2
- [fs-extra](https://npm.io/package/fs-extra.md) ^9.0.1
- [camelcase](https://npm.io/package/camelcase.md) ^6.1.0
- [react-dom](https://npm.io/package/react-dom.md) ^17.0.2
- [babel-jest](https://npm.io/package/babel-jest.md) ^26.6.0
- [css-loader](https://npm.io/package/css-loader.md) 4.3.0
- [lit-js-sdk](https://npm.io/package/lit-js-sdk.md) ^1.1.197
- [url-loader](https://npm.io/package/url-loader.md) 4.1.1
- [web-vitals](https://npm.io/package/web-vitals.md) ^1.0.1
- [@babel/core](https://npm.io/package/@babel/core.md) 7.12.3
- [file-loader](https://npm.io/package/file-loader.md) 6.1.1
- [jest-circus](https://npm.io/package/jest-circus.md) 26.6.0
- [sass-loader](https://npm.io/package/sass-loader.md) ^10.0.5
- [babel-eslint](https://npm.io/package/babel-eslint.md) ^10.1.0
- [babel-loader](https://npm.io/package/babel-loader.md) 8.1.0
- [jest-resolve](https://npm.io/package/jest-resolve.md) 26.6.0
- [style-loader](https://npm.io/package/style-loader.md) 1.3.0
- [@svgr/webpack](https://npm.io/package/@svgr/webpack.md) 5.5.0
- [dotenv-expand](https://npm.io/package/dotenv-expand.md) 5.1.0
- [react-refresh](https://npm.io/package/react-refresh.md) ^0.8.3
- [postcss-loader](https://npm.io/package/postcss-loader.md) 3.0.0
- [react-dev-utils](https://npm.io/package/react-dev-utils.md) ^11.0.3
- [postcss-normalize](https://npm.io/package/postcss-normalize.md) 8.0.1
- [eslint-plugin-jest](https://npm.io/package/eslint-plugin-jest.md) ^24.1.0
- [identity-obj-proxy](https://npm.io/package/identity-obj-proxy.md) 3.0.0
- [pnp-webpack-plugin](https://npm.io/package/pnp-webpack-plugin.md) 1.6.4
- [postcss-preset-env](https://npm.io/package/postcss-preset-env.md) 6.7.0
- [react-app-polyfill](https://npm.io/package/react-app-polyfill.md) ^2.0.0
- [resolve-url-loader](https://npm.io/package/resolve-url-loader.md) ^3.1.2
- [webpack-dev-server](https://npm.io/package/webpack-dev-server.md) 3.11.1
- [eslint-plugin-react](https://npm.io/package/eslint-plugin-react.md) ^7.21.5
- [html-webpack-plugin](https://npm.io/package/html-webpack-plugin.md) 4.5.0
- [postcss-safe-parser](https://npm.io/package/postcss-safe-parser.md) 5.0.2
- [eslint-plugin-import](https://npm.io/package/eslint-plugin-import.md) ^2.22.1
- [jest-watch-typeahead](https://npm.io/package/jest-watch-typeahead.md) 0.6.1
- [eslint-webpack-plugin](https://npm.io/package/eslint-webpack-plugin.md) ^2.5.2
- [terser-webpack-plugin](https://npm.io/package/terser-webpack-plugin.md) 4.2.3
- [@testing-library/react](https://npm.io/package/@testing-library/react.md) ^11.1.0
- [babel-preset-react-app](https://npm.io/package/babel-preset-react-app.md) ^10.0.0
- [eslint-plugin-flowtype](https://npm.io/package/eslint-plugin-flowtype.md) ^5.2.0
- [eslint-plugin-jsx-a11y](https://npm.io/package/eslint-plugin-jsx-a11y.md) ^6.3.1
- [postcss-flexbugs-fixes](https://npm.io/package/postcss-flexbugs-fixes.md) 4.2.1
- [workbox-webpack-plugin](https://npm.io/package/workbox-webpack-plugin.md) 5.1.4
- [eslint-config-react-app](https://npm.io/package/eslint-config-react-app.md) ^6.0.0
- [mini-css-extract-plugin](https://npm.io/package/mini-css-extract-plugin.md) 0.11.3
- [webpack-manifest-plugin](https://npm.io/package/webpack-manifest-plugin.md) 2.2.0
- [@testing-library/jest-dom](https://npm.io/package/@testing-library/jest-dom.md) ^5.11.4
- [@typescript-eslint/parser](https://npm.io/package/@typescript-eslint/parser.md) ^4.5.0
- [eslint-plugin-react-hooks](https://npm.io/package/eslint-plugin-react-hooks.md) ^4.2.0
- [@testing-library/user-event](https://npm.io/package/@testing-library/user-event.md) ^12.1.10
- [lit-share-modal-v3-react-17](https://npm.io/package/lit-share-modal-v3-react-17.md) ^0.0.86
- [eslint-plugin-testing-library](https://npm.io/package/eslint-plugin-testing-library.md) ^3.9.2
- [babel-plugin-named-asset-import](https://npm.io/package/babel-plugin-named-asset-import.md) ^0.3.7
- [@typescript-eslint/eslint-plugin](https://npm.io/package/@typescript-eslint/eslint-plugin.md) ^4.5.0
- [optimize-css-assets-webpack-plugin](https://npm.io/package/optimize-css-assets-webpack-plugin.md) 5.0.4
- [case-sensitive-paths-webpack-plugin](https://npm.io/package/case-sensitive-paths-webpack-plugin.md) 2.3.0
- [@pmmmwh/react-refresh-webpack-plugin](https://npm.io/package/@pmmmwh/react-refresh-webpack-plugin.md) 0.4.3

## Recent versions

- 0.1.12 (latest) — 2022-07-15

## README

<!-- START doctoc generated TOC please keep comment here to allow auto update -->
<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->

- [Lit Share Modal V2 Vanilla JS Wrapper](#lit-access-control-conditions-modal-vanilla-js-wrapper)
  - [Example](#example)
  - [How to use](#how-to-use)

<!-- END doctoc generated TOC please keep comment here to allow auto update -->

# Lit Share Modal V3 Vanilla JS Wrapper

This is a wrapper around the Lit Share Modal React package, here: https://github.com/LIT-Protocol/lit-share-modal-v3

The purpose is to let you use the Lit Share Modal in Vanilla JS, without having to use React.

## Example

Check out example.html to see a complete example

## How to use

You need to add a tag to the head section of your website:

```html
<script src="https://cdn.jsdelivr.net/npm/lit-share-modal-v3-vanilla-js/dist/index.js"></script>
```

You also need to define functions that will be called when you want to show or close the modal. In this example, we have a button that will call showShareModal() when clicked.

```html
<script>
  function closeModal() {
    console.log("close share modal");
    ACCM.ReactContentRenderer.unmount(document.getElementById("shareModal"));
  }
  function openShareModal() {
    console.log("open share modal");
    ACCM.ReactContentRenderer.render(
      ACCM.ShareModal,
      // props to be passed to the ShareModal component.  These are documented here: https://github.com/LIT-Protocol/lit-access-control-conditions-modal#props
      {
        sharingItems: [],
        onAccessControlConditionsSelected: function (accessControlConditions) {
          console.log(
            "accessControlConditions from ShareModal: ",
            accessControlConditions
          );
          closeModal();
          // now, use the accessControlConditions to provision access using one of the methods below:
          // https://developer.litprotocol.com/docs/SDK/dynamicContent
          // or https://developer.litprotocol.com/docs/SDK/staticContent
        },
        onClose: closeModal,
        getSharingLink: function (sharingItem) {
          console.log("getSharingLink", sharingItem);
          return "";
        },
        showStep: "ableToAccess",
      },
      // target DOM node
      document.getElementById("shareModal")
    );
  }
</script>
```

In our HTML, we have a div that the modal is loaded into, and a button that calls openShareModal when clicked:

```html
<body>
  <div id="shareModal"></div>
  <button onclick="javascript:openShareModal()">Open Share Modal</button>
</body>
```

**Note:** although it's called a modal, the Lit Share Modal is not set up to render that way by default. You must include outside CSS like that below for it to render correctly

example CSS

```css
#shareModal {
  width: 500px;
  height: 700px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border: 1px solid #333;
}
```

Once the user picks their access control conditions, the function passed in to `onAccessControlConditionsSelected` will be called with the accessControlConditions as a parameter. At this point, you should use the accessControlConditions variable to provision access using one of the methods below:

- Dynamic Content - Provisoning access to a resource: https://developer.litprotocol.com/docs/SDK/dynamicContent

- Or Static Content - Storing any static content and manually storing the metadata: https://developer.litprotocol.com/docs/SDK/staticContent

---
_Source: https://npm.io/package/lit-share-modal-v3-vanilla-js · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._