https://github.com/naveenvignesh5/react-native-alert-wrapper
Alert Wrapper for React & React Native with customization facilities.
https://github.com/naveenvignesh5/react-native-alert-wrapper
alert javascript npm react react-native wrapper
Last synced: 3 months ago
JSON representation
Alert Wrapper for React & React Native with customization facilities.
- Host: GitHub
- URL: https://github.com/naveenvignesh5/react-native-alert-wrapper
- Owner: naveenvignesh5
- Created: 2019-01-30T04:55:13.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2019-01-30T14:34:56.000Z (over 7 years ago)
- Last Synced: 2025-04-09T23:59:32.754Z (about 1 year ago)
- Topics: alert, javascript, npm, react, react-native, wrapper
- Language: JavaScript
- Size: 5.86 KB
- Stars: 3
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
### **React-Native-Alert-Wrapper**
- A Wrapper that enables you to call your alert from anywhere in the app
- Removes the pain of writing your alert views on each rn-screen
***Note:*** This project uses [react-native-dropdownalert](https://www.npmjs.com/package/react-native-dropdownalert/v/3.1.2) as a default alert component. Have a look at it. :blush:
#### Platform Support
Supports both Android and iOS.
#### Props
The following props are applicable for the **AlertProvider** wrapper.
Prop | Type | Optional | Default | Description
----------------- | -------- | -------- | ----------- | -----------
customAlert | any | Yes | null | Custom Alert Component
### Guide to write custom alert component
**Basic Template**
```javascript
class CustomAlertComponent extends PureComponent { // PureComponent - Optimal Performance
// Required
alert = (...params) => {
// Logic to trigger alert
}
// Required
alertWithType = (...params) => {
// Similar to alert method. Could be used to have different alert types
}
render() {
return (
// View definitions
);
}
}
```
***Warning:***
CustomAlertComponent class requires both `alert` and `alertWithType` methods to be defined. Otherwise it will raise undefined error
### Integrating with React Native
**App.js**
```javascript
import React from 'react';
import { AlertProvider, SampleAlert } from 'react-native-alert-wrapper';
// CustomComponent
import CustomAlertComponent from './CustomAlertComponent'; // Wherever you keep it
const App = () => (
// ...
);
const AppWithAlert = () => (
);
export default AppWithAlert;
```
### Usage inside a Screen Component
```javascript
import React, { Component } from 'react';
import { View, Button } from 'react-native';
import { connectAlert } from 'react-native-alert-wrapper';
class Home extends Component {
state = {}
render() {
this.props.alert(param1, param2)} />
}
}
export default connectAlert(Home); // with make alert and alertWithType props available to Home
```
### TO-DO
- [ ] To generalize code for React & React-native
- [ ] QA