{"id":24988495,"url":"https://github.com/lit-protocol/lit-share-modal-v2","last_synced_at":"2025-04-12T00:08:03.284Z","repository":{"id":42368876,"uuid":"465381547","full_name":"LIT-Protocol/lit-share-modal-v2","owner":"LIT-Protocol","description":null,"archived":false,"fork":false,"pushed_at":"2022-05-31T23:13:53.000Z","size":1294,"stargazers_count":3,"open_issues_count":2,"forks_count":2,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-04-26T11:20:51.192Z","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}},"created_at":"2022-03-02T16:22:28.000Z","updated_at":"2023-01-23T00:08:37.000Z","dependencies_parsed_at":"2022-09-21T18:25:00.277Z","dependency_job_id":null,"html_url":"https://github.com/LIT-Protocol/lit-share-modal-v2","commit_stats":null,"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-v2","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LIT-Protocol%2Flit-share-modal-v2/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LIT-Protocol%2Flit-share-modal-v2/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LIT-Protocol%2Flit-share-modal-v2/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-v2/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":237111688,"owners_count":19257389,"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:29.125Z","updated_at":"2025-02-04T12:04:29.848Z","avatar_url":"https://github.com/LIT-Protocol.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"The Lit Share Modal 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](./assets/sharemodal.jpg)\n\nA Vanilla JS wrapper for the Lit Share Modal is also available.\n\n- [Vanilla JS wrapper on GitHub](https://github.com/LIT-Protocol/lit-share-modal-v2-vanilla-js)\n- [Vanilla JS wrapper on NPM](https://www.npmjs.com/package/lit-share-modal-v2-vanilla-js)\n\n*Note for NextJS users:* If you are using NextJS, the CSS injection will not work.  Set the `injectCSS` prop to false, and\nimport the CSS file directly from `node_modules/lit-share-modal/dist/style.css` in `_app.tsx` or `_app.jsx`.\n\n# Installation\n\nwith npm\n\n```\nnpm install --save lit-share-modal\n```\n\nwith yarn\n\n```\nyarn add lit-share-modal\n```\n\n# Usage\n\nwith React Hooks\n\n```\nimport ShareModal from 'lit-share-modal';\nimport { useState } from 'react';\nimport './App.css'\n\nconst App = () =\u003e {\n  const [openShareModal, setOpenShareModal] = useState(false);\n\n  const onAccessControlConditionsSelected = (shareModalOutput) =\u003e {\n    // do things with share modal output\n  }\n\n  return (\n    \u003cdiv className={'App'}\u003e\n      \u003cShareModal onClose={() =\u003e setOpenShareModal(false)}\n                  showModal={openShareModal}\n                  onAccessControlConditionsSelected={onAccessControlConditionsSelected} /\u003e\n    \u003c/div\u003e\n\n  );\n}\n\nexport default App;\n\n```\n\n# Props\n\n### Required\n\n- `onClose` - callback for actions to take on closing the modal\n- `showModal` - boolean that signals whether modal is open (true) or closed (false)\n- `onAccessControlConditionsSelected` - callback for the share modal output\n\n`onAccessControlConditions` provides an object with the following properties:\n\n- `accessControlConditions` - 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\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- `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 of the page when the page 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.\n- `defaultTokens` - set quick access tokens that appear in the `Select a Token/NFT` menu\n- `darkTheme` - `false` by default. Set as 'true' to enable dark mode.\n- `loadingState` - `false` initially, but reflects the loading state on the `Review Conditions` screen. Allows the loader status to be reset\nfrom outside the modal.\n\nThree tokens/NFTs appear as default: `Ethereum`, `LitGate`, and `Blocks`\n\nThis list can be altered 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","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flit-protocol%2Flit-share-modal-v2","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flit-protocol%2Flit-share-modal-v2","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flit-protocol%2Flit-share-modal-v2/lists"}