Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/beefe/react-native-popup
popup for react-native
https://github.com/beefe/react-native-popup
Last synced: 2 months ago
JSON representation
popup for react-native
- Host: GitHub
- URL: https://github.com/beefe/react-native-popup
- Owner: beefe
- Created: 2015-12-15T10:22:51.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2018-09-22T08:48:05.000Z (almost 6 years ago)
- Last Synced: 2024-04-09T21:49:49.926Z (3 months ago)
- Language: JavaScript
- Size: 676 KB
- Stars: 170
- Watchers: 9
- Forks: 41
- Open Issues: 14
-
Metadata Files:
- Readme: README.md
Lists
- awesome-react-native - react-native-popup ★153 - Popup for react-native (Components / UI)
- awesome-reactnative-ui - react-native-popup - native|<ul><li>Last updated : 1 month ago</li><li>Stars : 156</li><li>Open issues : 14</li></ul>|| (Others)
- awesome-react-native - react-native-popup ★153 - Popup for react-native (Components / UI)
- awesome - react-native-popup ★153 - Popup for react-native (Components / UI)
- awesome-react-native-master - react-native-popup ★27 - popup for react-native (Components / UI)
- awesome-react-native - react-native-popup ★137 - popup for react-native (Components / UI)
- awesome-reactnative-ui - react-native-popup - native|<ul><li>Last updated : 1 month ago</li><li>Stars : 156</li><li>Open issues : 14</li></ul>|| (Others)
- awesome-react-native - react-native-popup ★137 - popup for react-native (Components / UI)
- awesome-react-native - react-native-popup ★153 - popup for react-native (Components / UI)
- awesome-react-native-ui - react-native-popup ★91 - popup for react-native (Components / UI)
- awesome-stars - react-native-popup - popup for react-native (JavaScript)
- awesome-react-native - react-native-popup ★153 - Popup for react-native (Components / UI)
- awesome-react-native - react-native-popup ★153 - Popup for react-native (Components / UI)
- awesome-react-native - react-native-popup ★39 - popup for react-native (Components / UI)
README
# react-native-popup
[](https://www.npmjs.com/package/react-native-popup)
This is a custom component for React Native, a simple popup, compatible with ios and android.
###Demo
###Props
- isOverlay *bool* - *`default true`*
- isOverlayClickClose *bool* - *`default true`*
###~~*`static`*~~ Methods
- alert(`message`: *string*|*number*, [...])
```javascript
e.g.
this.popup.alert(1);
this.popup.alert(1, 'two', '10 messages at most');
```
- tip({ `title`: *string*, `content`: *string*|*number*|*array*<*string*|*number*> *`isRequired`*, `btn`: {`title`: *string* *`default 'OK'`*, `callback`: *function*}, })
```javascript
e.g.
this.popup.tip({
content: 'come on!',
});
this.popup.tip({
title: 'TipTip',
content: 'come on!',
});
this.popup.tip({
content: ['come on!', 'go!'],
btn: {
text: 'OKOK',
style: {
color: 'red'
},
callback: () => {
this.popup.alert('over!');
},
},
});
```
- confirm({ `title`: *string*, `content`: *string*|*number*|*array*<*string*|*number*> *`isRequired`*, `ok`: {`title`: *string* *`default 'OK'`*, `callback`: *function*}, `cancel`: {`title`: *string* *`default 'Cancel'`*, `callback`: *function*}, })
```javascript
e.g.
this.popup.confirm({
content: 'Are you ready?',
});
this.popup.confirm({
content: 'Are you ready?',
ok: {
callback: () => {
this.popup.alert('Very good!');
},
},
});
this.popup.confirm({
title: 'title',
content: ['come on!', 'go!'],
ok: {
text: 'Y',
style: {
color: 'red'
},
callback: () => {
this.popup.alert('Good!');
},
},
cancel: {
text: 'N',
style: {
color: 'blue'
},
callback: () => {
this.popup.alert('Hurry up！');
},
},
});
```
###Usage
####Step 1 - install
```
npm install react-native-popup --save
```
####Step 2 - import and use in project
```javascript
import Popup from 'react-native-popup';
class App extends React.Component{
onPressHandle() {
// alert
this.popup.alert(1);
},
render() {
return (
click me !
{/** Popup component */}
this.popup = popup }/>
{/** or this.popup = popup } isOverlay={false} isOverlayClickClose={false}/> */}
);
},
};
```