upmostly / modali Goto Github PK

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?

Does Modal have any features for Focus trapping or have a known solution with one of the other focus traps out there?

The ability to customize Modali would be excellent.

Something along the lines of passing in a custom style object to a prop.

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

Its possible implement dismiss modal animation? Like bootstrap modal...

Thx for amazing lib

I just want to hide the close button, but not the title.

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.

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".

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

Content is shifting to the left by 15px (the width of a sidebar) on mobile devices.

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..

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>
}

https://github.com/rehooks/awesome-react-hooks

@jcrowson What do you think? Ready for a few more users?

This desperately needs unit tests.

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.

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

If I have elements beyond modal, I cant scroll to see.

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.

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.

not sure that's meant to be like that or it's bug.

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.

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!

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

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.

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?