Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/chentsulin/react-redux-sweetalert
SweetAlert with Redux-style actions, reducers API
https://github.com/chentsulin/react-redux-sweetalert
react react-redux redux sweetalert
Last synced: 23 days ago
JSON representation
SweetAlert with Redux-style actions, reducers API
- Host: GitHub
- URL: https://github.com/chentsulin/react-redux-sweetalert
- Owner: chentsulin
- License: mit
- Created: 2016-05-16T09:57:08.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2018-07-24T17:17:46.000Z (over 6 years ago)
- Last Synced: 2024-10-05T01:45:40.500Z (about 1 month ago)
- Topics: react, react-redux, redux, sweetalert
- Language: JavaScript
- Homepage:
- Size: 104 KB
- Stars: 32
- Watchers: 3
- Forks: 8
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# react-redux-sweetalert
[![NPM version][npm-image]][npm-url]
[![Build Status][travis-image]][travis-url]
[![Test coverage][coveralls-image]][coveralls-url]
[![Dependency Status][david_img]][david_site]
> SweetAlert with Redux-style actions, reducers API
## Install
```
$ npm install react-redux-sweetalert
```
## Usage
```js
import React, { Component } from 'react';
import { createStore, combineReducers, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import { Provider } from 'react-redux';
import { reducer } from 'react-redux-sweetalert';
const rootReducer = combineReducers({
sweetalert: reducer,
});
const store = createStore(
rootReducer,
applyMiddleware(thunk),
);
render(
);
```
You should import sweetalert.css from cdn, file, node_modules(sweetalert/dist/sweetalert.css) or wherever can find the css code.
Checkout full examples [here](https://github.com/chentsulin/react-redux-sweetalert/tree/master/examples).
## API
### types
#### Payload
```js
{
// sweetalert option
title: string,
text?: string,
type?: string,
customClass?: string,
showCancelButton?: boolean,
showConfirmButton?: boolean,
confirmButtonText?: string,
confirmButtonColor?: string,
cancelButtonText?: string,
imageUrl?: string,
imageSize?: string,
html?: boolean,
animation?: boolean|string,
inputType?: string,
inputValue?: string,
inputPlaceholder?: string,
showLoaderOnConfirm?: boolean,
timer?: number,
closeOnConfirm?: boolean,
closeOnCancel?: boolean,
allowEscapeKey?: boolean,
allowOutsideClick?: boolean,
// custom option
onConfirm?: Function,
onCancel?: Function,
onClose?: Function,
onEscapeKey?: Function,
onOutsideClick?: Function,
}
```
### actions
#### swal(title: string, text: ?string, type: ?string)
#### swal(payload: Payload)
#### close()
## Examples
```js
import React, { Component, PropTypes } from 'react';
import { connect } from 'react-redux';
import ReduxSweetAlert, { swal, close } from 'react-redux-sweetalert'; // eslint-disable-line
class Main extends Component {
static propTypes = {
close: PropTypes.func.isRequired,
swal: PropTypes.func.isRequired,
};
render() {
return (
this.props.swal({
title: 'Demo',
text: 'SweetAlert in React',
onConfirm: this.props.close,
})}
>Alert
);
}
}
export default connect(null, {
swal,
close,
})(Main);
```
Checkout full examples [here](./examples).
## Use with ImmutableJS
```js
import React, { Component } from 'react';
import { createStore, applyMiddleware } from 'redux';
import { combineReducers } from 'redux-immutable';
import thunk from 'redux-thunk';
import { Provider } from 'react-redux';
import { immutableReducer } from 'react-redux-sweetalert';
const rootReducer = combineReducers({
sweetalert: immutableReducer,
});
const store = createStore(
rootReducer,
applyMiddleware(thunk),
);
render(
);
```
See full example [here](https://github.com/chentsulin/react-redux-sweetalert/tree/master/examples/immutable/components/App.js).
## License
MIT © [C.T. Lin](https://github.com/chentsulin/react-redux-sweetalert)
[npm-image]: https://badge.fury.io/js/react-redux-sweetalert.svg
[npm-url]: https://npmjs.org/package/react-redux-sweetalert
[travis-image]: https://travis-ci.org/chentsulin/react-redux-sweetalert.svg?branch=master
[travis-url]: https://travis-ci.org/chentsulin/react-redux-sweetalert
[coveralls-image]: https://coveralls.io/repos/chentsulin/react-redux-sweetalert/badge.svg?branch=master&service=github
[coveralls-url]: https://coveralls.io/r/chentsulin/react-redux-sweetalert?branch=master
[david_img]: https://david-dm.org/chentsulin/react-redux-sweetalert.svg
[david_site]: https://david-dm.org/chentsulin/react-redux-sweetalert