{"id":23249350,"url":"https://github.com/sigmachirality/chigiri","last_synced_at":"2025-08-20T07:31:28.418Z","repository":{"id":49317880,"uuid":"516820183","full_name":"sigmachirality/chigiri","owner":"sigmachirality","description":"🎗️ Trigger React forms and modals from async code","archived":false,"fork":false,"pushed_at":"2022-08-20T19:31:44.000Z","size":2243,"stargazers_count":8,"open_issues_count":0,"forks_count":0,"subscribers_count":3,"default_branch":"master","last_synced_at":"2024-04-12T21:56:41.907Z","etag":null,"topics":["async","modal","modal-dialogs","promise","react","typescript"],"latest_commit_sha":null,"homepage":"https://danxtao.com/chigiri","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"unlicense","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/sigmachirality.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2022-07-22T16:36:46.000Z","updated_at":"2023-03-16T05:00:12.000Z","dependencies_parsed_at":"2022-08-28T18:42:02.930Z","dependency_job_id":null,"html_url":"https://github.com/sigmachirality/chigiri","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/sigmachirality%2Fchigiri","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sigmachirality%2Fchigiri/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sigmachirality%2Fchigiri/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sigmachirality%2Fchigiri/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/sigmachirality","download_url":"https://codeload.github.com/sigmachirality/chigiri/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":230400576,"owners_count":18219832,"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":["async","modal","modal-dialogs","promise","react","typescript"],"created_at":"2024-12-19T08:18:47.085Z","updated_at":"2024-12-19T08:18:47.767Z","avatar_url":"https://github.com/sigmachirality.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Chigiri 🎗️\nChigiri is a [React](https://reactjs.com) [Context](https://reactjs.org/docs/context.html) library for calling React Components as data fetchers from `async` code. It accomplishes this by wrapping components in [Promises](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise).\n\n## But Why?\nYou can model a modal/general component as a Promise which resolves with the form contents of that component. This is nice when implementing UI/UX flows like [Two Factor Authentication](https://www.twilio.com/docs/glossary/what-is-two-factor-authentication-2fa), where blocking until the data is returned, as opposed to hooking into or writing an `onSubmit`-like function, allows you to maintain variables in execution context. Following this approach, one can trigger components as data fetchers from `async` code!\n\nCompared to existing packages, Chigiri plays nicely with frameworks like [NextJS](https://nextjs.org/) which rely heavily on [Server-side Rendering](https://nextjs.org/docs/basic-features/pages#server-side-rendering). This is because existing packages register components at runtime, whereas Chigiri requires you to register all possible modal components at build time using a `ComponentTypes`-like object.\n\n## Limitations\n-  `triggerPromise` lacks inferred typing. You can type `triggerPromise` by passing a [Type Variable](https://www.typescriptlang.org/docs/handbook/2/generics.html)\n-  `ModalProvider` can only open 1 modal at a time. Not sure if allowing more than 1 modal open at a time would be an anti-pattern.\n\n## Documentation\nI wrote a simple example app using [Chakra UI](https://chakra-ui.com) which you can clone, build and run at `/example` in this repo or view [here](https://danxtao.com/chigiri). The app provides a few interactive examples of how to use Chigiri, as well as links to their implementation in the `/example` app.\n\n## Quick Start\n\n### Base provider example\nUse this provider if you want fine control of the modal component (where it's rendered in the DOM, props, etc). \n\n```typescript\nimport { PromiseProvider, usePromiseWrapper } from 'chigiri';\nimport ExampleModal from './ExampleModal';\n\nfunction App() {\n  return (\n    \u003cPromiseProvider\u003e\n      \u003cChild\u003e\n    \u003c/PromiseProvider\u003e\n  )\n}\n\nfunction Child() {\n  const { isOpen, resolve, reject, triggerPromise } = usePromiseWrapper();\n  const [state, setState] = useState\u003cStateType\u003e();\n  const onClick = async () =\u003e {\n    const stateFromModal = await triggerModal\u003cStateType\u003e();\n    setState(stateFromModal);\n  }\n  return (\n    \u003cExampleModal\n      isOpen={isOpen}\n      onSubmit={resolve}\n      onClose={reject}\n    /\u003e\n    \u003cbutton onClick={onClick}\u003eSet State\u003c/button\u003e\n    \u003ch1\u003eState: {state}\u003c/h1\u003e\n  )\n}\n```\n\n### Modal provider example\n```typescript\nimport registerModals from 'chigiri';\nimport ExampleModal from './ExampleModal';\nconst modals = {\n  ExampleModal: ExampleModal\n};\nconst { useModal, ModalProvider } = registerModals(modals);\n\nfunction App() {\n  return (\n    \u003cModalProvider\u003e\n      \u003cChild\u003e\n    \u003c/ModalProvider\u003e\n  )\n}\n\nfunction Child() {\n  const { triggerModal } = useModal();\n  const [state, setState] = useState\u003cStateType\u003e();\n  const onClick = async () =\u003e {\n    const stateFromModal = await triggerModal\u003cStateType\u003e('ExampleModal', modalProps);\n    setState(stateFromModal);\n  }\n  return (\n    \u003cbutton onClick={onClick}\u003eSet State\u003c/button\u003e\n    \u003ch1\u003eState: {state}\u003c/h1\u003e\n  )\n}\n```\n\n## Maintainers\nThis library is maintained with ❤️ by me, [sigmachirality](https://github.com/sigmachirality).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsigmachirality%2Fchigiri","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsigmachirality%2Fchigiri","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsigmachirality%2Fchigiri/lists"}