https://github.com/kessejones/react-sweetalert2-redux

This is an implementation of react-sweetalert2 with redux and redux-thunk
https://github.com/kessejones/react-sweetalert2-redux

alert react-redux reactjs redux redux-thunk sweetalert2

Last synced: 14 days ago
JSON representation

This is an implementation of react-sweetalert2 with redux and redux-thunk

• Host: GitHub
• URL: https://github.com/kessejones/react-sweetalert2-redux
• Owner: kessejones
• License: apache-2.0
• Created: 2018-12-10T23:57:53.000Z (almost 6 years ago)
• Default Branch: master
• Last Pushed: 2019-01-07T17:33:23.000Z (almost 6 years ago)
• Last Synced: 2024-09-22T00:42:48.417Z (about 2 months ago)
• Topics: alert, react-redux, reactjs, redux, redux-thunk, sweetalert2
• Language: JavaScript
• Homepage:
• Size: 9.85 MB
• Stars: 2
• Watchers: 3
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# react-sweetalert2-redux

## Install

```

$ npm install react-sweetalert2-redux

```

## Usage

```javascript

import React from 'react';

import ReactDOM from 'react-dom';

import { Provider } from 'react-redux';

import { createStore, combineReducers, applyMiddleware } from 'redux';

import thunk from 'redux-thunk';

import ReduxSweetAlert2, { reducer } from 'react-sweetalert2-redux';

const rootReducers = combineReducers({

    sweetalert2: reducer

});

const store = createStore(

    rootReducers, 

    applyMiddleware(thunk)

);

const App = () => (

    

        

    

);

ReactDOM.render(, document.getElementById('root'));

```

## API

### Payload

```js

{

    show: bool.isRequired,

    title?: string,

    titleText?: string,

    html?: string,

    text?: string,

    type?: enum(['warning', 'error', 'success', 'info', 'input']),

    footer?: string,

    backdrop?: boolean,

    toast?: boolean,

    target?: string,

    input?: enum(['text', 'email', 'password', 'number', 'tel', 'range', 'textarea', 'select', 'radio', 'checkbox', 'file', 'url']),

    width?: number,

    padding?: number,

    background?: string,

    position?: enum(['center', 'top', 'top-start', 'top-end', 'center-start', 'center-end', 'bottom', 'bottom-start', 'bottom-end']),

    grow?: enum(['row', 'column', 'fullscreen', false]),

    customClass?: string,

    timer?: number,

    animation?: boolean,

    heightAuto?: boolean,

    allowOutsideClick?: boolean,

    allowEscapeKey?: boolean,

    allowEnterKey?: boolean,

    stopKeydownPropagation?: boolean,

    keydownListenerCapture?: boolean,

    showConfirmButton?: boolean,

    showCancelButton?: boolean,

    confirmButtonText?: string,

    cancelButtonText?: string,

    confirmButtonColor?: string,

    cancelButtonColor?: string,

    confirmButtonClass?: string,

    cancelButtonClass?: string,

    confirmButtonAriaLabel?: string,

    cancelButtonAriaLabel?: string,

    buttonsStyling?: boolean,

    reverseButtons?: boolean,

    focusConfirm?: boolean,

    focusCancel?: boolean,

    showCloseButton?: boolean,

    closeButtonAriaLabel?: string,

    showLoaderOnConfirm?: boolean,

    preConfirm?: Function,

    imageUrl?: string,

    imageWidth?: number,

    imageHeight?: number,

    imageAlt?: string,

    imageClass?: string,

    inputPlaceholder?: string,

    inputValue?: string,

    inputOptions?: Object,

    inputAutoTrim?: boolean,

    inputAttributes?: Object,

    inputValidator?: Function,

    validationMesage?: string,

    inputClass?: string,

    progressSteps?: [],

    currentProgressStep?: string,

    progressStepsDistance?: string,

    onBeforeOpen?: Function,

    onOpen?: Function,

    onClose?: Function,

    onAfterClose?: Function,

    useRejections?: boolean,

    expectRejections?: boolean,

    onConfirm?: Function,

    showLoading?: boolean

}

```

### Actions

```js

openAlert(payload: Payload);

```

```js

closeAlert();

```

## Examples

```js

import React from 'react';

import ReactDOM from 'react-dom';

import { connect } from 'react-redux';

import { createStore, combineReducers, applyMiddleware } from 'redux';

import ReduxSweetAlert2, { openAlert } from 'react-sweetalert2-redux';

class App extends Component {

    render(){

        return (

            


                 {

                    this.props.openAlert({

                        title: 'Hello World'

                    });

                }}>

                    Open Alert

                

                

            

        );

    }

}


export default connect(null, { openAlert })(App);

```