anymodal-ts
Advanced tools
This library allows you to centrally manage modal windows with strict typing in your React app. You can pass any typed data to a modal window.
bun add anymodal-ts
yarn add anymodal-ts
Initialize the modal manager:
Create a file, for example, in @/lib/modals.ts, and define all your possible modals:
import anyModal from 'anymodal-ts';
const modals = anyModal<
| { type: 'view-article'; articleId: number }
| { type: 'new-article'; categoryId: number }
| {
type: 'another-modal';
param1: string;
param2: number;
param3: number[];
}
>();
export default modals;
Add ModalContainer and register modals:
Place the ModalContainer component in the root of your application (e.g., in layout.tsx) and import the registry file.
// layout.tsx
import modals from '@/lib/modals';
import '@/components/modals/registry'; // Import to register all modals
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return <html>
<body>
{children}
<modals.ModalContainer />
</body>
</html>
}
Create a component for each modal.
Example for view-article:
// @/components/modals/view-article.tsx
import modals from '@/lib/modals';
import ReactModal from 'react-modal';
export default modals.create(
'view-article',
({ modal: { articleId } }) => <ReactModal
isOpen={true}
onRequestClose={() => modals.prev()}
>
<h2>Article #{articleId}</h2>
<p>This is the content of the article.</p>
<button onClick={() => modals.close()}>
Close All Modals
</button>
</ReactModal>
);
Register your modals:
Create a "registry" file that simply imports all your modal components. This ensures that they are registered when the app starts.
// @/components/modals/registry.tsx
import './view-article';
import './new-article';
// ... import all other modals
You can now call your modals from any component.
import modals from '@/lib/modals';
export default function MyPageComponent() {
return <div>
<button
onClick={() =>
modals.show({
type: 'view-article',
articleId: 15,
})
}
>
View article
</button>
<button
onClick={() =>
modals.show({
type: 'new-article',
categoryId: 6,
})
}
>
New article
</button>
</div>
}
The anyModal instance returns the following methods:
show(modal): Opens a new modal. If another modal is already open, it's added to a stack.prev(): Closes the current modal and opens the previous one from the stack. Ideal for "Back" buttons or closing with the Esc key.close(): Closes all modals and clears the stack. Use this for "Close" buttons (like a cross icon) or for actions that should exit the entire modal flow.create(type, Component): Registers a component for a specific modal type.createWithFetch(type, fetcher, Component): Registers a component that needs to fetch data before rendering.You can use createWithFetch to create modals that load data from an API.
// @/components/modals/view-article-with-fetch.tsx
import modals from '@/lib/modals';
import ReactModal from 'react-modal';
async function fetchMyArticle(articleId: number) {
const response = await fetch(
`https://api.example.com/articles/${articleId}`
);
return response.json();
}
export default modals.createWithFetch(
'view-article',
({ articleId }) => fetchMyArticle(articleId),
({
modal: { articleId },
data: article,
}) => <ReactModal
isOpen={true}
onRequestClose={() => modals.prev()}
>
<h2>
{article.title} (Article #{articleId})
</h2>
<p>{article.content}</p>
</ReactModal>
);
FAQs
Centralized modal manager with strict typing for React.
The npm package anymodal-ts receives a total of 9 weekly downloads. As such, anymodal-ts popularity was classified as not popular.
We found that anymodal-ts demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
OpenAI rotated macOS signing certificates after a malicious Axios package reached its CI pipeline in a broader software supply chain attack.
Security News
Open source is under attack because of how much value it creates. It has been the foundation of every major software innovation for the last three decades. This is not the time to walk away from it.
Security News
Socket CEO Feross Aboukhadijeh breaks down how North Korea hijacked Axios and what it means for the future of software supply chain security.