https://github.com/lit-protocol/lit-share-modal-v2
https://github.com/lit-protocol/lit-share-modal-v2
Last synced: about 1 year ago
JSON representation
- Host: GitHub
- URL: https://github.com/lit-protocol/lit-share-modal-v2
- Owner: LIT-Protocol
- Created: 2022-03-02T16:22:28.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2022-05-31T23:13:53.000Z (about 4 years ago)
- Last Synced: 2024-04-26T11:20:51.192Z (about 2 years ago)
- Language: JavaScript
- Size: 1.23 MB
- Stars: 3
- Watchers: 2
- Forks: 2
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
The Lit Share Modal is a tool for creating access control conditions for securing content with Lit Protocol.
[Click here to visit the Lit Protocol developer docs.](https://developer.litprotocol.com/docs/intro/)
- Secure content based on wallet address, token/NFT holdings, POAP ownership, or DAO membership.
- Create multiple paths for unlocking content by using AND/OR operators.
- Set your most used tokens/NFTs as defaults for quick and easy access.
A Vanilla JS wrapper for the Lit Share Modal is also available.
- [Vanilla JS wrapper on GitHub](https://github.com/LIT-Protocol/lit-share-modal-v2-vanilla-js)
- [Vanilla JS wrapper on NPM](https://www.npmjs.com/package/lit-share-modal-v2-vanilla-js)
*Note for NextJS users:* If you are using NextJS, the CSS injection will not work. Set the `injectCSS` prop to false, and
import the CSS file directly from `node_modules/lit-share-modal/dist/style.css` in `_app.tsx` or `_app.jsx`.
# Installation
with npm
```
npm install --save lit-share-modal
```
with yarn
```
yarn add lit-share-modal
```
# Usage
with React Hooks
```
import ShareModal from 'lit-share-modal';
import { useState } from 'react';
import './App.css'
const App = () => {
const [openShareModal, setOpenShareModal] = useState(false);
const onAccessControlConditionsSelected = (shareModalOutput) => {
// do things with share modal output
}
return (
setOpenShareModal(false)}
showModal={openShareModal}
onAccessControlConditionsSelected={onAccessControlConditionsSelected} />
);
}
export default App;
```
# Props
### Required
- `onClose` - callback for actions to take on closing the modal
- `showModal` - boolean that signals whether modal is open (true) or closed (false)
- `onAccessControlConditionsSelected` - callback for the share modal output
`onAccessControlConditions` provides an object with the following properties:
- `accessControlConditions` - an array of objects and nested arrays reflecting the selected conditions
- `permanent` - a boolean signaling whether conditions will be permanent (true) or editable by the author in the
future (false)
Documentation on how these properties are used with the `LitJsSdk`, can be found in
the [LitJsSdk docs](https://lit-protocol.github.io/lit-js-sdk/api_docs_html/index.html#litnodeclientsavesigningcondition)
### Optional
- `injectCSS` - a boolean that is set to true by default. When this is true, the CSS styles will be injected into
the of the page when the page loads, so there is no need to import any css. You can set this to "false" if you
want to use your own CSS.
- `defaultTokens` - set quick access tokens that appear in the `Select a Token/NFT` menu
- `darkTheme` - `false` by default. Set as 'true' to enable dark mode.
- `loadingState` - `false` initially, but reflects the loading state on the `Review Conditions` screen. Allows the loader status to be reset
from outside the modal.
Three tokens/NFTs appear as default: `Ethereum`, `LitGate`, and `Blocks`
This list can be altered by passing an array of objects with the following properties:
- `label` - name of token/NFT
- `logo` - url of token/NFT favicon
- `value` - token/NFT address
- `symbol` - token/NFT symbol
- `standard` - token standard (ERC20, ERC721, or ERC1155)
**Example of a single entry quick access array**
```
export const defaultTokens = [
{
label: "Lit Genesis Gate",
logo: "https://litgateway.com/favicon.png",
value: "0xA3D109E28589D2AbC15991B57Ce5ca461Ad8e026",
symbol: "LITGATE",
standard: "ERC721",
}
];
```