marcio/react-skylight

A react component for modals and dialogs

React SkyLight

React SkyLight is a simple react component for modals and dialogs. Powerful, lightweight and customizable design.

React SkyLight DEMOS and DOCS.

Installation

$ npm install react-skylight --save
# Installation via Yarn
$ yarn add react-skylight

Features

• Very simple modal/dialog
• Animation support
• Stateless
• Callback before open
• Callback after open
• Callback before close
• Callback after close
• Callback on overlay click
• All styles can be overridden

How to use

React skylight DEMOS and DOCS. Enjoy!

Release History

• 2018-04-03   v0.5.1   Change dialog style height to minHeight, react 16 support, remove unused dependencies
• 2017-09-20   v0.5.0   Add animation, ESC to close, title as component and and some fixes
• 2017-05-23   v0.4.2   Solve propTypes warnings, and some fixes
• 2016-08-31   v0.4.1   Polyfill Object.assign() to works in IE
• 2016-04-27 v0.4.0 Fix issue #35 (numeric string value for CSS property), up to react 15.0.1 and merged pull request to support Stateless (thanks @darthtrevino)
• 2016-01-09   v0.3.0   Rewrite to ES2015, overlay callback and new site.
• 2015-04-08   v0.2.0   Improvements
• 2015-02-03   v0.1.4   Changed skylight.js to skylight.jsx and adjust of namespace

react-skylight's Issues

'title' change to 'titleStyle'

Hi there! Love your demo at http://marcio.github.io/react-skylight/. I do notice that there is a typo at "Default Styles" section there, where the styles name for title was "title" and I think it should be "titleStyle", else it would have the same variable name passing to the Skylight component.

No information that react-skylight is available only on es2015.

@marcio Could you remind us that we should use import SkyLight from 'react-skylight' instead SkyLight = require('react-skylight') in READMD.md?
Because not everyone use es2015. at least I think you should have to explain that react-skylight 3.0 is on es2015 only.

Rename `lib/skylight.js as `lib/skylight.jsx`?

Would it be possible for you to rename lib/skylight.js aslib/skylight.jsx`?

Webpack can't pick up the right format now and you have to point directly to the file so you get an ugly import like this require('jsx!react-skylight/src/skylight.js').SkyLight. I think that could be just require('react-skylight') if it was correct.

Unignore styles-examples?

It would be possible to consume the library CSS directly through a require using Webpack if it was provided with the project. If you unignored styles-examples, then you could do require('react-skylight/styles-examples/default.css'). Maybe it would be even better to push default.css to project root as that would clean up the require even further.

Publish compiled version of JSX code

As it's then universally consumable.

You could do something similar to andreypopp/react-time#9

onOverlayClicked() called twice

Line 47 of skylight.js may call onOverlayClicked() a second time.

PeerDep Problem

Hi, I encounter the following problem when installing:

georgejor$ npm install --save react-skylight
npm ERR! Darwin 14.3.0
npm ERR! argv "/Users/georgejor/.nvm/versions/node/v0.12.5/bin/node" "/Users/georgejor/.nvm/versions/node/v0.12.5/bin/npm" "install" "--save" "react-skylight"
npm ERR! node v0.12.5
npm ERR! npm v2.11.2
npm ERR! code EPEERINVALID

npm ERR! peerinvalid The package object-assign does not satisfy its siblings' peerDependencies requirements!

Please help! Thanks!

Take input data from modal, Like filling form

This modal is good, But I'm not getting, how to get input data on a submitting form in modal ?.
Is there any example then please help.

How to close modal on submission of an embedded form?

Option to hide title and closebox

Would be nice if there would be built-in options to hide the dialog title and the closebox. I am implementing my own title and closebox (which is located at the bottom) and so currently I have to specify a CSS override to hide these elements.

Having an option in the 'dialogstyles' or somewhere else to hide these elements would be helpful.

Use fixed positioning instead of absolute for skylight-dialog__overlay?

I noticed it can be problematic to have skylight-dialog__overlay use absolute positioning by default. If you do this, the overlay won't follow while you are scrolling (it gets 100% width/height based on viewport, not whole document). It might be preferable to use fixed positioning instead. You are already doing this with the dialog itself.

Besides that the modal seems to be performing ok. I have a demo running at http://bebraw.github.io/reactabular/ (hit one of those edit buttons at a row). It could use some styling still.

It could be nice to include some basic animation examples with Skylight. Ie. animate opacity (fade in, fade out).

display: block on overlay element

Is there a particular reason why display: block is forced on the overlay element? I'd like to use flexbox to center the modal on the page properly.

Loosen peer dependency to allow usage with 0.13 and further?

Now it's "react": "^0.12.x" which seems a bit too tight. "react": ">=0.12.0 <1.0.0" would work though you can use something else if you want.

IE11 problem in v0.4.1 - Object doesn't support property or method 'assign'

Seems still broken in Internet Explorer 11 with version 0.4.1.

I included latest version in my project and get following error in IE11:

SCRIPT438: Object doesn't support property or method 'assign'

Following page is not working either if I try to open it in IE 11: http://marcio.github.io/react-skylight/.
Also there I get following error:

SCRIPT438: Object doesn't support property or method 'assign'

typo in demo

"SkyhLight" on http://marcio.github.io/react-skylight/

Also, " in or design" -- or->our?

Is it possible to add open/close transitions?

Hi there,
I'm looking for a modal component, yours looks great in terms of functionality.
I was wondering if it is possible to get transition effects with it like with Boron
Thank you!

How can I use an IIFE to open a modal when the user first opens the web page ?

I have a modal page popping up when the user clicks a button :

    `render() {
      return (
         <div>
             <section>
                 <button onClick={() => this.refs.simpleDialog.show()}>Open Modal</button>
             </section>
             <SkyLight hideOnOverlayClicked ref="simpleDialog" title="Test Modal">
                 Text that appears inside the modal page
                <Button onClick={() => this.refs.simpleDialog.hide()} >Got It</Button>
             </SkyLight>
        </div>
    )} `

• My goal is to open the modal automatically when the user opens the page for the first time.

• I don't want to open the modal page by clicking on a button
  Question:

• Can I use an IIFE (An immediately-invoked function expression) in order to open the modal as soon as the user open the page ?

• My approach was to set a boolean to true. Then open the modal if the value is set to true

update for new React 15.0.1

Hello @marcio ,

Could you please update your awesome component for new React? It is working, but the warnings are thrown

Warning: a a tag (owner: SkyLight) was passed a numeric string value for CSS property top (value: 0) which will be treated as a unitless number in a future version of React.

Warning: a h2 tag (owner: SkyLight) was passed a numeric string value for CSS property marginTop (value: 0) which will be treated as a unitless number in a future version of React.

I think, you just need to change the style.js file....

Thanks

.jsx source, problems with mocha

Hi, I think your module is really neat. Nice job there. ^_^

But, would you mind offering a non-jsx source too?
I'm using browserify and mocha and preprocessed jsx is fine
when used in an app, but the preprocesser is not run when
files are piped mocha/node instead - I really don't want to keep a
compiled version of the module and update it whenever I
update from npm. =/

I'm also curious as to why you'd decide to force users to
compile jsx when using the Skylight?

Go through Ryan Florence's list of modal recommendations

Just came by https://gist.github.com/ryanflorence/fd7e987c832cc4efaa56 . It might be a good idea to go through those issues and see how Skylight manages with them.

Handling dynamic content

How do you recommend handling dynamic content? I have a component where I set the content of the modal in a state variable. The problem is that when I set state and open the modal in the same function, the modal always get old content.

Component = React.createClass({
    openModal: function( item ){
        this.setState({ item: item });
        this.refs.itemModal.show();
    },
    render: function(){
        return(
            <a href="javascript:;" onClick={ this.openModal.bind( this, item ) }>Load dynamic content</a>
            <SkyLight ref="itemModal">
                <CreatePurchase item={ this.state.item } />
            </SkyLight>
        )
    }
});

Warning 'h2' tag

Is there any way in order to avoid this warning?

Thanks

Allow modal inside a modal

would be nice allow a modal have another modal inside it :) what do you think?

Push new version with custom close button

Hi, I see there's a commit to add support for a custom close button. We'd like to start using this, however there's no release on npm for it and if I point at HEAD, lib hasn't been updated with the new code in src. Would it be possible to do an official release?

Push `browserify` and `reactify` to `devDependencies`

As they're regular deps now they bloat up the distribution version somewhat. Can you push those as dev deps instead?

How to get access to element inside Modal?

Hi,
I have been trying to implement autofocus on a text input field inside a modal. I started by calling focus() on the element inside the _executeAfterModalOpen() callback. An alert function inside the callback is working fine.
But it looks like this inside the callback is not pointing to the component. So, this.refs is showing up as _unassigned_ which I am trying to use to get hold of the input field in turn doing this.refs.modal.focus().

EDIT: I meant this.refs is showing up as undefined.

Allow ESC key to close modal ?

ESC to close modal as default option
maybe we can override default behavior by pass an option

How to use react-skylight in requirejs

I have some issues on using react-skylight in requirejs.

Can you please confirm that you have tested this component in requirejs?

Multiple Modals on Same Page

Hello. I've been looking to implement skylight in one of my projects and have run into a couple questions. I have multiple items on a page that when clicked open up a modal with more info. I'm having trouble figuring out how to reference each individual modal when an item is clicked. In your examples, you open them using this.refs.refName.open(). Is there a way to open a modal using an ID? I was hoping to pass an ID to the store (flux), and then use this id to open the appropriate modal.

Produces error 'Unexpected token' on using some CSS properties.

I am using the boilerplate https://github.com/juliancwirko/react-boilerplate, and tried applying some properties on a modal using...

var improvedObjectiveModal = {
        backgroundColor: '#00897B',
        color: '#ffffff',
        width: '50%',
        height: '100px',
        display: 'flex',
        align-items: 'center',
        justify-content: 'center'
      };

But my app produces the error for properties like align-items and justify-content. The other properties are otherwise working as expected.

Polyfill Object.assign() if not available (currently affects IE11)

Hi, I'm running react-skylight in my app and am testing it now across browsers.

I found that react-skylight depends on Object.assign() in the skylightstateless.jsx code, which crashes in IE11 because Object.assign() is not yet available in the browser.

For now I worked around this issue by introducing a polyfill into my app, but there really should be a proper fail-safe handling in react-skylight that either throws an error to inform the developer that they need to introduce a polyfill when using react-skylight, or react-skylight could include it's own polyfill to fall back to if it is not natively supported by the browser it is running in.

(for example the Mozilla polyfill code could be used)

Regards,
Wolfgang

Changing render location

Is there an easy way to have the skylight render on top of another component vs. the one it was called in?

Allow dialog to be closed by clicking the background

Instead of growing the API, maybe it would make sense to make background replaceable? You can provide some default thinger for it. I mean something like:

<SkyLight background={<SkyLight.Background onClick={...} />} />

If background is not provided, it would use the default implementation.

This injection mechanism could be used for other parts of the component if you want to provide extension points.

Maybe some kind of an alternative API could work for this. It's just the obvious solution that came to my mind.

skylight won't hide when "onClick" initiated from a div or img

I'm only able to get the hide() option to work when the skylight show()'s from a button. If any other event generates the skylight, the this.hide() function loses track. I can put an image and button side-by-side with the same onClick={foo.hide()} and the button will open, with the X in the corner closing it, while the image when clicked will pop the same skylight component up, but the X doesn't work.

Am I missing something?

Add classname to override styles

Hi, thanks for your work on this component! I was wondering if it is possible to pass in a classname that gets passed to the modal window and the overlay? I was hoping to do this as an alternative to inline styles since I am using CSS Modules.

Thanks so much!

Broken in ie?

: Object doesn't support property or method 'assign'

use the prop-types package (propTypes deprecated)

Hi ! Firstable, thank you for react-skylight, it works fine for me !!

Since a few weeks, there is an error for everyone :
"Accessing PropTypes via the main React package is deprecated. Use the prop-types package from npm instead."
The problem is : I installed prop-types but the error is still visible.

After doing what brianvaughn recommanded, it figured that the problem comes from react-skylight
http://stackoverflow.com/questions/43303761/accessing-proptypes-via-the-main-react-package-is-deprecated

Can you fix it ?
Thank you again !!

Prop type expects string, but any element works fine

I get the warning:
Failed prop type: Invalid prop `title` of type `object` supplied to `SkyLight`, expected `string`

I assign my title like this

<SkyLight title={<h5>{ myTitle }</h5>} />

And it works fine.
Unless I am missing something, I think you can relax the requirement that this be a string to allow any react element.

SkyLightStateless not working

My SkyLightStatelessComponent is not showing even when the isVisible prop is set to true.
When debugging with react dev tools i could see that the isVisible prop of SkyLightStatelesscomponent changes but its isVisible state is not set accordingly.
My code

<SkyLightStateless isVisible={this.props.page_details.user_popup_requested} dialogStyles={myBigGreenDialog} onCloseClicked={() => {this.closePopUp()}}>
          <Loader loaded={this.props.page_details.popup_user_loaded}/>
          <If condition={this.props.page_details.popup_user_loaded}>
	        <UserPopupCard />
	  </If>
 </SkyLightStateless>

(https://cloud.githubusercontent.com/assets/15194796/22596077/27c6b2f0-ea50-11e6-9cfe-7ce3c689d82c.png)

Close button not working

The component is successfully loading on my browser, however, when I hover over the document, the text turns white and the close button is not working.

Please note that I am listing an array of links where each link should open a modal.

Here is a snapshot of my function where skylight is called:

the function is invoked here:

SkyLightStateless callbacks (afterClose, afterOpen etc.) don't work

Having SkyLight modal which should be opened when isVisible is true, I'd like do some actions after modal opens (particularly focus on some field). It seems that afterOpen callback does not work (console.log doesn't show anything, when modal opens...)

someFunc() {
    console.log('cb test')
}
 
 <SkyLightStateless
    isVisible={isVisible}
    afterOpen={this.someFunc}
 >
....

Not getting the latest version

How come I'm not getting the latest version even though i clear the npm cache and delete the installation folder before running npm update?

In my package.json it says version 0.2.0, as it does here. However I can see there are changes to skylight.jsx that I'm missing. Do you need to bump the version number?

Question: what is the preferred why to trigger a popup

Question: what is the preferred why (SEO wise) to trigger a popup if I cannot use buttons (design issue)?
I need this for site crawlers to crawl our modal content which contains important info.
Any thoughts?

Best.

Large content doesn't scroll...

Would be nice if this were configured so that if the modal size exceeds screen size, that the modal area will scroll... It's a work in progress (almost done if I can find the time), but you can look at how I did this in my md-datepicker demo.

Basically, I had to place a container inside the overlay with automatic scrolling, so that when the size of the window is smaller than the modal, the modal area becomes scrollable. If you look at the stylesheet specifically .outer, .inner, .inner2 is how this is done... it will middle-align the content, unless it's too big, which will be at the top, then scroll.

You'll have to capture click bubbling from the modal, in order to prevent the outer from being clicked, doing it the way I did... other than that, it works pretty well.

Open-state should be exposed as prop

In Flux/Redux apps, the state of components is externalized and injected via properties. What I would like to do is have flux events that mutate the contents of the skylight, then present it by setting the "open" state to true.

Callbacks with parameters + Specific callbacks on buttons ?

Hi,

I recently started using your skylight component since it's so great and does exactly what I want, but the problem is that it seems to be impossible to give params to callbacks, when they have a parameter the callback functions only run once.

Also, is there a way to specify the callback (or its parameters) to the button that calls the Skylight Modal

Thanks :)

Example code uses depreciated code.

When using the following SkyLight component, React says that "Using string literals in ref attributes is depreciated. react/no-string-refs".

<SkyLight 
    ref="dialogWithCallBacks" 
    title="Hello!"
    beforeOpen={beforeFirstOpen}
    afterOpen={afterFirstOpen}
    beforeClose={beforeFirstClose}
    afterClose={afterFirstClose}>
    I have callbacks!
</SkyLight>

Styles should preferably be controlled with CSS and not JS

By relying on JS to set inline styles, I am now finding it very troublesome to implement mobile friendliness. If the styles were controlled with CSS, I could have easily used media queries.

Error thrown on mounting

All of a sudden there is an error thrown when SkyLight is mounted, saying "Uncaught TypeError: Cannot read property 'hasOwnProperty' of undefined".

It used to work, it might have broke after i updated npm. Any ideas what could be wrong?

Getting the below issue when Skylight is being loaded.

react-skylight/src/skylight.jsx Line 72: Unexpected token <
You may need an appropriate loader to handle this file type.
| 
|         if (this.props.showOverlay) {
|             overlay = (<div style={overlayStyles}></div>);
|         }
| 
 @ ./~/react-skylight/index.js 1:17-46