react-modalz v0.0.92

React-Modalz

Easy, fast, straight foward react/redux modal.

!!! This lib has Redux-Thunk as middleware dependency. !!!

Installation

$ npm install react-modalz
$ yarn add react-modalz

Usage example

import deps

index.js

import thunk from 'redux-thunk'
import { Provider } from 'react-redux'
import { createStore, applyMiddleware } from 'redux'
import rootReducer from './rootReducer'

const store = applyMiddleware(thunk)(createStore)(rootReducer)

> index.js
```bash
<Provider store={store}>
	<App />
</Provider>

Place the Modalz component at your 'root' so it can be called gloabally between all components.

app.js

import React from 'react'
import { Modalz, ModalzActions } from 'react-modalz/lib'
import { connect } from 'react-redux'
import { bindActionCreators } from 'redux'

function App(props) { return (

<div className="App">
  <button onClick={() => props.modalzOpen(<Component userId={1} />)}>Open Modal</button>
  <Modalz />
</div>

); }

function Component(props) { return (

<div>
  Heres is you component inside Modalz Body. // {props.userId}
</div>

) }

const mapState = state => ({ modalz: state.modalz }) const mapDispatch = dispatch => bindActionCreators({ modalzOpen: ModalzActions.modalzOpen }, dispatch)

export default connect( mapState, mapDispatch )(App)

Finally in your rootReducer file
> rootReducer.js
```bash
import { combineReducers } from 'redux'
import { ModalzReducers } from 'react-modalz/lib'

export default combineReducers({
  modalz: ModalzReducers
})

Redux Actions

modalzUpdate method

Here you can update the modal config. ex:

useEffect(() => {
  props.modalzUpdate({
    title: 'modal title here.'
  })
}, [])

modalzUpdate object props