Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/sigmachirality/chigiri
🎗️ Trigger React forms and modals from async code
https://github.com/sigmachirality/chigiri
async modal modal-dialogs promise react typescript
Last synced: 26 days ago
JSON representation
🎗️ Trigger React forms and modals from async code
- Host: GitHub
- URL: https://github.com/sigmachirality/chigiri
- Owner: sigmachirality
- License: unlicense
- Created: 2022-07-22T16:36:46.000Z (over 2 years ago)
- Default Branch: master
- Last Pushed: 2022-08-20T19:31:44.000Z (over 2 years ago)
- Last Synced: 2024-04-12T21:56:41.907Z (9 months ago)
- Topics: async, modal, modal-dialogs, promise, react, typescript
- Language: TypeScript
- Homepage: https://danxtao.com/chigiri
- Size: 2.14 MB
- Stars: 8
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Chigiri 🎗️
Chigiri 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).
## But Why?
You 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!
Compared 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.
## Limitations
- `triggerPromise` lacks inferred typing. You can type `triggerPromise` by passing a [Type Variable](https://www.typescriptlang.org/docs/handbook/2/generics.html)
- `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.
## Documentation
I 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.
## Quick Start
### Base provider example
Use this provider if you want fine control of the modal component (where it's rendered in the DOM, props, etc).
```typescript
import { PromiseProvider, usePromiseWrapper } from 'chigiri';
import ExampleModal from './ExampleModal';
function App() {
return (
)
}
function Child() {
const { isOpen, resolve, reject, triggerPromise } = usePromiseWrapper();
const [state, setState] = useState();
const onClick = async () => {
const stateFromModal = await triggerModal();
setState(stateFromModal);
}
return (
Set State
State: {state}
)
}
```
### Modal provider example
```typescript
import registerModals from 'chigiri';
import ExampleModal from './ExampleModal';
const modals = {
ExampleModal: ExampleModal
};
const { useModal, ModalProvider } = registerModals(modals);
function App() {
return (
)
}
function Child() {
const { triggerModal } = useModal();
const [state, setState] = useState();
const onClick = async () => {
const stateFromModal = await triggerModal('ExampleModal', modalProps);
setState(stateFromModal);
}
return (
Set State
State: {state}
)
}
```
## Maintainers
This library is maintained with ❤️ by me, [sigmachirality](https://github.com/sigmachirality).