{"id":24988421,"url":"https://github.com/lit-protocol/lit-share-modal-v3","last_synced_at":"2025-10-26T00:40:40.737Z","repository":{"id":39668442,"uuid":"495888789","full_name":"LIT-Protocol/lit-share-modal-v3","owner":"LIT-Protocol","description":null,"archived":false,"fork":false,"pushed_at":"2023-02-13T07:41:21.000Z","size":756,"stargazers_count":11,"open_issues_count":4,"forks_count":6,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-04-12T00:07:27.178Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/LIT-Protocol.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-05-24T15:45:53.000Z","updated_at":"2023-06-18T11:07:54.000Z","dependencies_parsed_at":"2024-06-21T07:26:18.743Z","dependency_job_id":null,"html_url":"https://github.com/LIT-Protocol/lit-share-modal-v3","commit_stats":{"total_commits":62,"total_committers":4,"mean_commits":15.5,"dds":"0.11290322580645162","last_synced_commit":"668059086380c2bf0710314c30912539ec949bf5"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LIT-Protocol%2Flit-share-modal-v3","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LIT-Protocol%2Flit-share-modal-v3/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LIT-Protocol%2Flit-share-modal-v3/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LIT-Protocol%2Flit-share-modal-v3/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/LIT-Protocol","download_url":"https://codeload.github.com/LIT-Protocol/lit-share-modal-v3/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248497810,"owners_count":21113984,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2025-02-04T12:04:14.643Z","updated_at":"2025-10-26T00:40:40.663Z","avatar_url":"https://github.com/LIT-Protocol.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"This version of Lit Share Modal is for React 18.\n[A React 17 version can be found here.](https://www.npmjs.com/package/lit-share-modal-v3-react-17)\n\n[A list of recent updates can be found here](https://lit-services-docs.netlify.app/docs/share-modal/shareModalUpdates)\n\n[Click here to try out the share modal playground.](https://lit-share-modal-v3-playground.netlify.app/)\n\n[A migration guide on how to upgrade from the v2 share modal to v3 can be found here.](https://lit-services-docs.netlify.app/docs/share-modal/upgradingFromv2)\n\nThe Lit Share Modal v3 is a tool for creating access control conditions for securing content with Lit Protocol.\n[Click here to visit the Lit Protocol developer docs.](https://developer.litprotocol.com/docs/intro/)\n\n- Secure content based on wallet address, token/NFT holdings, POAP ownership, or DAO membership.\n- Create multiple paths for unlocking content by using AND/OR operators.\n- Set your most used tokens/NFTs as defaults for quick and easy access.\n\n![Lit Share Modal](src/assets/shareModalCover.png)\n\n*Note for NextJS users:* If you are using NextJS, the CSS injection will not work. Set the `injectCSS` prop to false,\nand\nimport the CSS file directly from `node_modules/lit-share-modal/dist/ShareModal.css` in `_app.tsx` or `_app.jsx`.\n\n# Installation\n\nwith npm\n\n```\nnpm install --save lit-share-modal-v3\n```\n\nwith yarn\n\n```\nyarn add lit-share-modal-v3\n```\n\n# Usage\n\nwith React Hooks\n\nDespite being called a modal, modal functionality is not included in this package in order to give developers maximum\nflexibility over implementation.  **Lit Share Modal** can be used in modal form or embedded in a page. An example of\nboth is provided below.\n\nas a modal\n\n```\nimport ShareModal from 'lit-share-modal-v3';\nimport { useState } from 'react';\nimport './App.css'\n\nconst App = () =\u003e {\n  const [showShareModal, setShowShareModal] = useState(false);\n\n  const onUnifiedAccessControlConditionsSelected = (shareModalOutput) =\u003e {\n    // do things with share modal output\n  }\n\n  return (\n    \u003cdiv className={'App'}\u003e\n      \u003cbutton onClick={() =\u003e setShowShareModal(true)}\u003e\n        Show Share Modal\n      \u003c/button\u003e\n    \n      {showShareModal \u0026\u0026 (\n        \u003cdiv className={'lit-share-modal'}\u003e\n          \u003cShareModal\n            onClose={() =\u003e {\n              setShowShareModal(false);\n            }}\n            onUnifiedAccessControlConditionsSelected={onUnifiedAccessControlConditionsSelected}\n          /\u003e\n        \u003c/div\u003e\n      )}\n    \u003c/div\u003e\n\n  );\n}\n\nexport default App;\n\n// CSS in App.css\n\n.lit-share-modal {\n  width: 500px;\n  height: 700px;\n  position: absolute;\n  left: 50%;\n  top: 50%;\n  transform: translate(-50%, -50%);\n  border: 1px solid #333;\n  border-radius: 0.25em;\n}\n\n```\n\nas embedded content\n\n```\nimport ShareModal from 'lit-share-modal-v3';\n\nconst App = () =\u003e {\n  const onUnifiedAccessControlConditionsSelected = (shareModalOutput) =\u003e {\n    // do things with share modal output\n  }\n\n  return (\n    \u003cdiv className={'App'}\u003e\n      \u003cShareModal isModal={false}  // use isModal to hide or display the close modal icon\n                  onUnifiedAccessControlConditionsSelected={onUnifiedAccessControlConditionsSelected} /\u003e\n    \u003c/div\u003e\n\n  );\n}\n\nexport default App;\n\n```\n\n# Props\n\n## Required\n\n- `onClose` - **only necessary for modal format**. Callback for actions to take on closing the modal\n- `onUnifiedAccessControlConditionsSelected` - callback for the share modal output\n\n`onUnifiedAccessControlConditionsSelected` provides an object with the following properties:\n\n- `unifiedAccessControlConditions` - an array of objects and nested arrays reflecting the selected conditions\n- `permanent` - a boolean signaling whether conditions will be permanent (true) or editable by the author in the\n  future (false)\n- `chains` - an array of all chain types used in a set of conditions\n- `authSigTypes` - an array of all authSig types that need to be passed into `saveSigningConditions`\n  and `getSignedToken` when saving and retrieving conditions.\n\nDocumentation on how these properties are used with the `LitJsSdk`, can be found in\nthe [LitJsSdk docs](https://lit-protocol.github.io/lit-js-sdk/api_docs_html/index.html#litnodeclientsavesigningcondition)\n\n## Optional\n\n### Behavior Props\n\nBehavior props allow high level control of the share modal. e.g. passing `defaultChain={solana}`\nand `chainsAllowed={['solana']}` will prevent access to EVM chain conditions and allow only the creation of Solana\nconditions.\n\n- `defaultChain` - `ethereum` by default. A string can be passed in any of the chains listed in\n  the [**Usable Chains** section](#usableChains).\n- `chainsAllowed` - all chains in the **Usable Chains** section below are included by default. An array can be passed in\n  with specific values to limit the options. e.g. passing in `['ethereum', 'polygon']` would let users only select\n  Ethereum or Polygon.\n- `allowChainSelector` - `true` by default. Setting as `false` will prevent users from switching between different chain\n  conditions types e.g. switching from Ethereum to Solana.\n- `allowMultipleConditions` - `true` by default. Setting to `false` will disable the multiple conditions screen and only\n  allow the creation of single control conditions.\n- `permanentDefault` - `false` by default. Setting to `true` will check by default the box that makes conditions\n  uneditable.\n- `isModal` - `true` by default. Setting to `false` will hide the close icon in the header.\n- `defaultTokens` - set quick access tokens that appear in the `Select a Token/NFT`\n  menu. [More information can be found below in the `defaultTokens` section](#defaultToken)\n\n### Initial State Props\n\nInitial state props control the initial state a user encounters upon mount. Props are evaluates in the same order as\nlisted below.\n\n- `injectInitialState` - `false` by default.  **Must be set to `true` to use initial state conditions. None of the\n  following props (basically anything starts with the word `initial`) will register unless this is set to `true`**\n- `initialUnifiedAccessControlConditions` - accepts a `unifiedAccessControlConditions`\n  object ([more information here](https://developer.litprotocol.com/docs/AccessControlConditions/unifiedAccessControlConditions))\n  . \u003ci\u003eIf no other initial state conditions are used, the modal state will default to the editor mode on the multiple\n  condition flow.\u003c/i\u003e\n- `initialFlow` - points to `singleCondition` by default. Accepts a string, either `singleCondition`\n  or `multipleConditions`. Initial share modal state will reflect that\n  prop.  [More information is available below](#initialState).\n- `initialCondition` - accepts a string to set the initial condition. Different chains have different condition options\n  available. [More information is available below](#initialState).\n- `initialState` - accepts an object with properties included to the desired condition type. [More information regarding\n  individual condition fields is available below](#initialState).\n\n### Additional Props\n\n- `darkTheme` - `false` by default. Setting as `true` to enable dark mode.\n- `allowDevMode` - `false` by default. Setting to `true` will show logs if there are prop type errors and enable the\n  ability to see the raw access control conditions in JSON format.\n- `injectCSS` - a boolean that is set to true by default. When this is true, the CSS styles will be injected into\n  the `\u003chead\u003e` tag of the page when it loads, so there is no need to import any css. You can set this to `false` if you\n  want to use your own CSS. For small changes, it's recommended to use the `cssSubstitution` object instead.\n- `cssSubstitution` - empty object by default. Allows pinpoint the customization of different components in the share\n  modal. More documentation will be available soon.\n\n## Prop references\n\n### \u003ca id=\"usableChains\"\u003e\u003c/a\u003eUsable Chains\n\nFor use with the `defaultChains` and `chainsAllowed` props. Pass the `value` as a string into the respective props to\nset\nthem. `defaultChain` accepts a string, `chainsAllowed` accepts an array of strings.\n\n**Chain values**\n\n| Chain Name            | Chain Value |\n|-----------------------|-------------|\n| Ethereum              | ethereum    |\n| Polygon               | polygon     |\n| Fantom                | fantom      |\n| xDai                  | xdai        |\n| Binance Smart Chain   | bsc         |\n| Arbitrum              | arbitrum    |\n| Avalance              | avalanche   |\n| Avalanche FUJI Testnet | fuji        |\n| Harmony               | harmony     |\n| Kovan                 | kovan       |\n| Goerli                | goerli      |\n| Ropstein              | ropstein    |\n| Rinkeby               | Rinkeby     |\n| Cronos                | cronos      |\n| Optimism              | optimism    |\n| Celo                  | celo        |\n| Aurora                | aurora      |\n| Eluvio                | eluvio      |\n\n**Example of setting `Polygon` as the default chain, and allowing `Polygon`, `Ethereum`, and `xDai` as options**\n\n```\n  \u003cShareModal\n    defaultChain={'polygon'} // pass as single string\n    chainOptions={['polygon', 'ethereum', 'xdai']} // mix of values listed above passed as an array of strings\n    onClose={() =\u003e {\n      setShowShareModal(false);\n    }}\n    onUnifiedAccessControlConditionsSelected={onUnifiedAccessControlConditionsSelected}\n  /\u003e\n```\n\n### \u003ca id=\"defaultToken\"\u003e\u003c/a\u003e `defaultTokens` prop\n\nDefines tokens at the top of the select menu for easy access.  `LitGate` is included by default, but this list can be\ncustomized by passing an array of objects with the following properties:\n\n- `label` - name of token/NFT\n- `logo` - url of token/NFT favicon\n- `value` - token/NFT address\n- `symbol` - token/NFT symbol\n- `standard` - token standard (ERC20, ERC721, or ERC1155)\n\n**Example of a single entry quick access array**\n\n```\nexport const defaultTokens = [\n  {\n    label: \"Lit Genesis Gate\",\n    logo: \"https://litgateway.com/favicon.png\",\n    value: \"0xA3D109E28589D2AbC15991B57Ce5ca461Ad8e026\",\n    symbol: \"LITGATE\",\n    standard: \"ERC721\",\n  }\n];\n```\n\n### \u003ca id=\"initialState\"\u003e\u003c/a\u003e `initialFlow`, `initialCondition`, and `initialState` props\n\n[Click here to see an example](#initialPropsExample)\n\n`initialFlow`, `initialCondition`, and `initialState` are technically independent, but can be used together to finely\ntune the initially rendered state.\n\n`initialFlow` - defines whether the modal starts in the single condition or multiple conditions flow. Single condition\nis default, but can be set to `multipleCondition` to begin in the multiple condition edit screen.\n\n`initialCondition` - passed as a string which renders the respective individual control condition upon startup. Each\nchain can use a different variety of values that reflect the conditions available.\n\n`Ethereum`, and `Gnosis (formerly xDai)`:\n\n| Condition Type                  | Value passed to `initialCondition` prop as string |\n|---------------------------------|---------------------------------------------------|\n| An Individual Wallet            | wallet                                            |\n| An Individual NFT               | nft                                               |\n| A Group of Token or NFT Holders | group                                             |\n| DAO Members                     | dao                                               |\n| POAP Collectors                 | poap                                              |\n\n`Polygon`, `Fantom`, `BSC`, `Arbitrum`, `Avalanche`, `Avalanche FUJI Testnet`, `Harmony`, `Mumbai`, `Kovan`, `Goerli`\n, `Ropstein`, `Rinkeby`, `Cronos`, `Optimism`, `Celo`, and `Aurora`:\n\n| Condition Type                  | Value passed to `initialCondition` prop as string |\n|---------------------------------|---------------------------------------------------|\n| An Individual Wallet            | wallet                                            |\n| An Individual NFT               | nft                                               |\n| A Group of Token or NFT Holders | group                                             |\n| DAO Members                     | dao                                               |\n\n`Solana`\n\n| Condition Type        | Value passed to `initialCondition` prop as string |\n|-----------------------|---------------------------------------------------|\n| An Individual Wallet  | wallet                                            |\n| An Individual NFT     | nft                                               |\n| A Metaplex Collection | group                                             |\n\n`initialState` - an object that defines the individual form fields available within a given control condition.\nIndividual fields are optional, and those that are not included will be rendered empty as normal.\n\nFor EVM chains (`Ethereum`, `Gnosis (formerly xDai)`, `Polygon`, `Fantom`, `BSC`, `Arbitrum`, `Avalanche`\n, `Avalanche FUJI Testnet`, `Harmony`, `Mumbai`, `Kovan`, `Goerli`\n, `Ropstein`, `Rinkeby`, `Cronos`, `Optimism`, `Celo`, `Eluvio`, and `Aurora`:)\n\n```\nAn Individual Wallet\n\nintialState = {\n  walletAddress: // wallet address as string\n}\n```\n\n```\nAn Individual NFT\n\nintialState = {\n  NFTAddress: // ERC 721 NFT contract address as string,\n  NFTTokenId: // NFT token ID as string\n}\n```\n\n```\nA Group of Token or NFT Holders\n\nintialState = {\n  groupAddress: // token or NFT address as string,\n  groupAmount: // amount to own as string,\n  groupContractType: // contract type, either 'ERC20', 'ERC721', or 'ERC1155',\n  groupErc1155TokenId: // ERC1155 token ID as string.  Only necessary if contract type is `ERC1155`\n}\n```\n\n```\nDAO Members\n\nintialState = {\n  DAOAddress: // DAO address as string,\n  DAOName: // not generally part of DAO conditions, but if a string is provided as a name it will render on the condition page\n}\n```\n\n```\nPOAP Collectors\n\ncan take either POAP Collection ID or POAP Name, not both.  POAP Name has an additional field 'matchCondition' that can be set to either 'contains' or 'equals'\n\nfor POAP Name:\nintialState = {\n  poapName: // name of POAP as string,\n  poapMatchCondition: // condition to measure against.  `contains` for contains value of `poapName`, or `equals` for equals exactly the value of `poapName`.  `contains` by default \n}\n\nfor POAP ID:\nintialState = {\n  poapId: // POAP collection ID as string.  note: individual token ID will not work\n}\n```\n\nFor Solana\n\n```\nAn Individual Wallet\n\ninitialState = {\n  solWalletAddress: // Phantom wallet address as a string\n}\n```\n\n```\nAn Individual NFT\n\ninitialState = {\n  solNFTAddress: // NFT contract address as a string\n}\n```\n\n```\nA Metaplex Collection\n\ninitialState = {\n  solMetaplexAddress: // Metaplex Collection address as a string\n}\n```\n\n### \u003ca id=\"initialPropsExample\"\u003e\u003c/a\u003e Initial props example\n\nIn this example, the share modal will be set to initially render in the **multiple condition flow** on the **Group Token\nor NFT Holders condition** with the **Contract Address** and **Token Contract Type** filled in, but the **Amount** field\nblank.\n\n\u003ci\u003eNote: the `amount` field is not included in the `initialState` object and will render like normal\u003c/i\u003e\n\n```\n\u003cShareModal \n  injectInitialState={true}\n  initialFlow={'multipleConditions'}\n  initialCondition={'group}\n  initialState={\n    address: '0x495f947276749ce646f68ac8c248420045cb7b5e',\n    contractType: 'ERC721'\n  }\n/\u003e\n```\n\nResult of initial state upon opening the Share Modal:\n![Initial Props Example](src/assets/initialStateExample.png)\n\n### \u003ca id=\"cssSubstitution\"\u003e\u003c/a\u003e `cssSubstitution` prop\n\n**[More information can be found here](https://lit-services-docs.netlify.app/docs/share-modal/cssSubstitution)**\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flit-protocol%2Flit-share-modal-v3","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flit-protocol%2Flit-share-modal-v3","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flit-protocol%2Flit-share-modal-v3/lists"}