https://github.com/axyz/react-zoom

Lightweight and stateless modal component for React.js based on flexbox
https://github.com/axyz/react-zoom

Last synced: 3 days ago
JSON representation

Lightweight and stateless modal component for React.js based on flexbox

• Host: GitHub
• URL: https://github.com/axyz/react-zoom
• Owner: axyz
• Created: 2016-03-01T13:21:11.000Z (over 8 years ago)
• Default Branch: master
• Last Pushed: 2018-04-23T15:11:19.000Z (over 6 years ago)
• Last Synced: 2024-04-26T21:47:41.615Z (7 months ago)
• Language: JavaScript
• Size: 18.6 KB
• Stars: 7
• Watchers: 7
• Forks: 1
• Open Issues: 4
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
react-zoom

===========

Lightweight and stateless modal component for React.js

It uses only css3 flexbox for positioning.

Usage

-----

Add `react-zoom` as a dependency

`$ npm install --save react-zoom`

then simply use the provided component

Note that the component is stateless, so updating the `isVisible` property should

be handled in the model of your app (e.g. using redux or similar flux

implementations)

The component is also unstyled (except for the layout).

For the `Zoom` component to work correctly, please be sure to have support for

`flex` or eventually be sure to use polyfills.

```javascript

import React from 'react';

import ReactDOM from 'react-dom';

import Zoom from 'react-zoom';

ReactDOM.render(

    


        


            ... // content of the modal

        

    
,

    document.getElementById('zoom-example')

);


```

Development

-----------

Clone the repository then

`$ npm install`

use

`$ make dist`

to build

and

`make dev`

to start a dev server on `localhost:8080`

to run tests just use

`$ npm test`

Warnings

--------

This component should not not be considered ready for production (until it will reach 1.0.0),

however testing and contributions are really welcome.