Pushmodal
Handle shadcn dialog, sheet and drawer with ease
Overview
The @radix-ui/react-dialog library offers a powerful solution for creating modals in your React applications. By streamlining the process of implementing dialogs, sheets, and drawers, it enables developers to provide a better user experience with less hassle. This library is particularly useful for those looking to manage multiple modal states seamlessly while also ensuring responsive designs that cater to both mobile and desktop users.
Features
-
Easy Initialization: Simply wrap your component with the
<DialogContent>,<SheetContent>, or<DrawerContent>components to create a modal quickly, skipping the need for Root initialization. -
Modal Management: Use
pushModalto add new modals to the stack, with options to specify modal names and props directly, facilitating better organization and control. -
Dynamic Closing Options: Choose from three different methods to close modals - pop the last modal, close a specific modal by name, or clear all modals at once with
popAllModals(). -
Simple Modal Replacement: Easily replace the current modal with a new one using the same interface as
pushModal, allowing for quick updates to the displayed content. -
Event Listening: Utilize
useOnPushModaloronPushModalto track modal events, providing insights into their status (open/closed) and maintaining a reactive experience. -
Responsive Design: Create responsive implementations that can switch between a drawer on mobile and a dialog on desktop, enhancing usability across devices.
-
Clear Structure for Issues: A dedicated section for issues or limitations allows users to stay informed about potential drawbacks and better understand the library's capabilities.
- React
React is a widely used JavaScript library for building user interfaces and single-page applications. It follows a component-based architecture and uses a virtual DOM to efficiently update and render UI components
- SCSS
SCSS is a preprocessor scripting language that extends the capabilities of CSS by adding features such as variables, nesting, and mixins. It allows developers to write more efficient and maintainable CSS code, and helps to streamline the development process by reducing repetition and increasing reusability.
- Tailwind
Tailwind CSS is a utility-first CSS framework that provides pre-defined classes for building responsive and customizable user interfaces.
- Eslint
ESLint is a linter for JavaScript that analyzes code to detect and report on potential problems and errors, as well as enforce consistent code style and best practices, helping developers to write cleaner, more maintainable code.
- Postcss
PostCSS is a popular open-source tool that enables web developers to transform CSS styles with JavaScript plugins. It allows for efficient processing of CSS styles, from applying vendor prefixes to improving browser compatibility, ultimately resulting in cleaner, faster, and more maintainable code.
- Rollup
RollupJS is a popular and efficient JavaScript module bundler that takes the code from multiple modules and packages them into a single optimized file, minimizing the overall size of the application and improving its performance.
- Storybook
Storybook is a tool for developing and testing UI components in isolation. It provides a sandbox environment where you can experiment with different props and states to see how your component responds.
- Typescript
TypeScript is a superset of JavaScript, providing optional static typing, classes, interfaces, and other features that help developers write more maintainable and scalable code. TypeScript's static typing system can catch errors at compile-time, making it easier to build and maintain large applications.