Skip to content

Latest commit

 

History

History
184 lines (135 loc) · 5.58 KB

README.md

File metadata and controls

184 lines (135 loc) · 5.58 KB
Raw

react-native-popup-ui

A simple and fully customizable React Native component that implements a popup UI.

  • Easy to customize, has prop to change background color
  • Function to close automatically
  • Receives callback prop to set button action

Example popup

Example One Example Two Example Three
examples/App.js examples/App.js examples/App.js

Example toast

Example One Example Two Example Three
examples/App.js examples/App.js examples/App.js

Installation

If using yarn:

yarn add popup-ui

If using npm:

npm i popup-ui

Usage

import { View, TouchableOpacity, Text } from 'react-native'
import { Root, Popup } from 'popup-ui'

Simply declare the method in your event Popup.show({...}) in its component.

<Root>
    <View>
        <TouchableOpacity
            onPress={() =>
              Popup.show({
                type: 'Success',
                title: 'Upload complete',
                button: false,
                textBody: 'Congrats! Your upload successfully done',
                buttonText: 'Ok',
                callback: () => Popup.hide()
              })
            }
        >
            <Text>Open Popup</Text>
        </TouchableOpacity>
    </View>
</Root>

You can also use the Toast component.

    // Is necessary make the import to Toast (import { Root, Toast } from 'popup-ui')
    <Root>
        <View>
            <TouchableOpacity
                onPress={() => 
                    Toast.show({
                        title: 'User created',
                        text: 'Your user was successfully created, use the app now.',
                        color: '#2ecc71'
                    })
                }
            >
                <Text>Call Toast</Text>
            </TouchableOpacity>
        </View>
    </Root>

Popup Type Usage

Popup contains a type-customization scheme Type props.

Example success usage:

Popup.show({
    type: 'Success'
})

Example warning usage:

Popup.show({
    type: 'Warning'
})

Example error usage:

Popup.show({
    type: 'Danger'
})

Popup Style Background

Popup contains a customization in Background props.

Example usage:

Popup.show({
    background: 'red'
})

Popup Callback Function

Popup contains a callback function in button popup Callback props.

Example usage:

Popup.show({
    callback: Popup.hide()
})

Documentation

Popup Component

Name Description Default Type
title Sets the main popup title Upload complete String
type Defines the type (Success, Warning or Error) Success String
textBody Defines the text body of popup String
button Whether or not to display the true Bool
buttonText Defines the text button of popup Ok String
callback Defines the function of button Alert() Func
background Sets the backgroundColor rgba(0, 0, 0, 0.5) String
timing Sets the time for the popup to close by itself 5000 Number
autoclose sets whether the popup will close automatically false Bool
icon use costum icon false Component

Toast Component

Name Description Default Type
title Sets the main toast title String
text Defines the text to toast String
color Defines the color to title, border and iconC #e1e1e1 String
timing Define your timing to close toast 6s Int
icon Choose your the best icon to toast Component

Contributing

Pull requests are always welcome! Feel free to open a new GitHub issue for any changes that can be made.

Author

Rafael Augusto | https://linkedin.com/in/rafaelaugustos/

Roadmap

  • Toast
  • Alert/Confirm
  • Create a function to close toast with gesture

License

MIT