upmostly / modali Goto Github PK
View Code? Open in Web Editor NEWA delightful modal dialog component for React, built from the ground up to support React Hooks.
A delightful modal dialog component for React, built from the ground up to support React Hooks.
Looks to me like you could remove the react-syntax-highlighter dependency.
Oh - I see references to it in the examples but shouldn't it not be in the npm release package?
I am looking at the source code of this awesome package and am stumped upon this line
const [isModalVisible, setIsModalVisible] = useState(false);
const [isShown, setIsShown] = useState(false);
const isModalVisibleRef = useRef(isModalVisible); // ← why useRef?
isModalVisibleRef.current = isModalVisible; // ← and this..?
function toggle() {
timeoutHack = setTimeout(() => {
setIsModalVisible(!isModalVisibleRef.current);
clearTimeout(timeoutHack);
}, 10);
setIsShown(!isShown);
setHasToggledBefore(true);
}
I am deeply interested into what was the decision behind this piece of code
Thanks!
This desperately needs unit tests.
https://github.com/rehooks/awesome-react-hooks
@jcrowson What do you think? Ready for a few more users?
Does Modal have any features for Focus trapping or have a known solution with one of the other focus traps out there?
Would be nice to have control over the animation so I could decide which animation I want the modal to have, including duration and so on.
I suspect you are add a class when rendering the modal, so show it, and on that class the transition is happening. I would like the control the initial style of the modal before it is showed and the style after it is shown, to have total control over the effect.
For example, I would like the modal to initially have this style:
opacity: 0;
transform: scale(.6) rotateX(10deg); // parent should always have "perspective:1000px"
And the "show" state should have this style:
opacity: 1;
transform: none;
Now that I think about it, I would like to have complete control over the whole style, from the background color, to modal shadow and everything..
This is more related to #15
Error: "Global CSS cannot be imported from within node_modules." error in Next.js
It's because of CSS import in main index.js
file.
Line 6 in 1a1f58a
Hello,
Really love the simplicity of this component however I'm having an issue where the Modali modals flash on page refresh/component unmounting.
I have the modal toggles initialized to false
and only update their state to true for certain actions however the modals are displaying for a split second on the pages/components just before a route change or transition to another page/component.
Here is the initialization of the modal with hooks:
const [upgradeAccountModal, toggleUpgradeAccountModal] = useModali(false)
And here is an example modal:
{toggleUpgradeAccountModal && (
<Modali.Modal
{...upgradeAccountModal}
animated={true}
centered={true}
>
<div className="error-message">
<div className="error-header">
<Logo />
<h3>Please upgrade your account.</h3>
</div>
<p>
Exporting to SCSS code is available to Hexy Pro
Unlimited and Hexy Pro Lifetime accounts.
<Link to="/pro">Upgrade now</Link> to export SCSS.
</p>
<button className="button">
<Link to="/pro">Upgrade</Link>
</button>
</div>
</Modali.Modal>
)}
This obviously shouldn't show unless toggleUpgradeAccountModal
is set to true
but for whatever reason, this must be getting toggled on the parent component unmount.
The only place this modal is set to true is in a handler deriving from an onClick
action:
<div className="export-code">
<Tippy
// options
content="Export SCSS code"
placement="top"
trigger="mouseenter"
arrow={true}
>
<span
className={`export-css ${
accountLevel &&
accountLevel === 'high'
? 'enabled'
: 'disabled'
}`}
onClick={() =>
exportCode(
palette.palette,
palette.name
)
}
>
<Code />
</span>
</Tippy>
</div>
And then the exportCode
handler:
const exportCode = (palette, paletteName) => {
if (
currentUser &&
smallAccounts.indexOf(currentUser.accountType) === 1
) {
toggleUpgradeAccountModal(true)
return
}
// rest of function code
}
Thus I can't seem to find any other way the modal toggle is being set to true, yet the modal is still flashing on unmount.
Any ideas on why this is happening and how to fix?
On mobile devices, Modali modals don't have much padding.
There's no way of going to the git repo from the demo page
I would suggest adding a Github badge link on the corner or something
Hello!
That lib looks really promising, so thank you!
I found an issue exploring modali with bundlephobia.
From bundlephobia stats, it turns that modali uses shortid
& nanoid
in the same time. A purpose of these libs is the same, but shortid
is 33% of the modali bundle, which is huge.
In the JS-file that is distributed, it still requires the CSS-file that you have previously removed, which makes this dependency fail to build in my project unless I add a CSS-file named modali.css
.
Could this require(..)
be removed from distributed source or a CSS-file be added?
The NPM package contains a little bloat (oops). Adding the following to the .npmignore file should fix it:
#tests
test
coverage
#build tools
.travis.yml
.jenkins.yml
.codeclimate.yml
#linters
.jscsrc
.jshintrc
.eslintrc*
#editor settings
.idea
.editorconfig
The component should either set a no-scroll class on the body or should manually set the body's style with document.body.overflowX = "hidden"
.
I like the approach here and I appreciate all the aria things, but I think the current styling approach is a bit heavy-handed.
How about separating the styling into the absolutely necessary for modals, and the optional for making it look nice? Then the necessary bits can be done with inline styles, which work everywhere, and the optional bits can be in a css file that the user has to include themselves.
An additional approach would be to allow passing components that replace the ones with optional styling. That way css-in-js can be used as well.
The ability to customize Modali would be excellent.
Something along the lines of passing in a custom style object to a prop.
If I have elements beyond modal, I cant scroll to see.
Hi,
love this component.
Got a compiler error, while using it with Typescript.
Compiled with warnings.
./node_modules/modali/dist/modali.css (./node_modules/css-loader/dist/cjs.js??ref--6-oneOf-3-1!./node_modules/postcss-loader/src??postcss!./node_modules/modali/dist/modali.css)
Warning
(39:3) start value has mixed support, consider using flex-start instead
not sure that's meant to be like that or it's bug.
I just want to hide the close button, but not the title.
I'm using these for now, if anyone wants to build off this:
modali.d.ts
declare module 'modali' {
export interface IModalProps {
isShown: boolean
hide: () => void
options: IModalOptions
}
export interface IModalOptions {
title?: string
message?: string
buttons?: array
closeButton?: boolean
animated?: boolean
large?: boolean
overlayClose?: boolean
keyboardClose?: boolean
}
export function useModali(IModalOptions?): [IModalProps, () => void]
export const Modal: FC<IModalProps>
}
Right now, I'm creating dynamic class names using inline conditionals. This can sometimes litter the classname attribute with false
if the conditional is, well, false.
Content is shifting to the left by 15px (the width of a sidebar) on mobile devices.
Its possible implement dismiss modal animation? Like bootstrap modal...
Thx for amazing lib
First.. great component. Very well done, easy to use, etc.
What I find is I need a couple of types of modals. The first is like what you have here, with a body, and a close button. This is great for quick notes/popups.
What I need more often is a modal with a title area (with custom color/gradient/etc), a body (again maybe with color options), and a footer area, primarily for buttons.
I would love to see you add the ability to not only specify a title (and color for text and background, borders, etc), color/border/etc for body, but some sort of button area with the ability to return the button clicked. I dont know if you should allow a component to be sent to the modal, or if you should just offer some most often used yes/no, save/close/cancel style buttons and a button clicked state option, or a hybrid approach where the user specifies the name of the button, text, left/right/center justify, color options, etc so they could maybe add a few buttons, like a cancel to the lower left, and a save to the right, each with different colors.
I realize that makes this a little more complicated, but it would essentially tick the majority use cases for modal popups, which in the past has often.. especially with Material Design, required a lot of extra work for multiple "simple" dialogs.
There's not a single word about position in the README, and all demos open the modal at the top of the window and not in the center, where it's more common.
I cannot use this lovely component until it has support for positioning it in the center..
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.