1.0.0 • Published 3 years ago

usnack v1.0.0

Weekly downloads
-
License
MIT
Repository
github
Last release
3 years ago

Usnack is a simple snackbar component that works seamlessly in Android and iOS, it does not have any external dependency and is extremely easy to import and use.

Its default style may remind you the one used in the Instagram app.

Install and use

  1. Install it with npm:
npm install usnack

or yarn:

yarn add usnack
  1. Import in your Js:
import Usnack from 'usnack';
  1. Use:
Usnack.show();

<Usnack.component text='Hello world'/>

Usnack.Component properties

PropData typeDescription
textstringThe text to display
containerStyleobjectThe style of the container
snackStyleobjectThe style of the snackbar
textStyleobjectThe style of the text

Show

show(options = {})

Fades in all the Usnack.components.

The optional parameter options must be an object which can have the following properties:

  • duration (The display time in milliseconds, by default it is 3000).

  • effect_duration (The fade in and out duration time in milliseconds, by default it is 1000).

  • native_driver (Use or not the native driver, by default it is true).

  • opacity (The final opacity, by default it is 1).

Examples

Simple text:

import Usnack from 'Usnack';

function example() {
    Usnack.show();
    return <Usnack.component text='No internet connection'/>;
}

Custom time:

import View from 'react-native';
import Usnack from 'Usnack';

function example() {
    Usnack.show({
        duration: 10000,
        effect_duration: 5000,
    });

    return (
        <View>
            <Usnack.component text='Waiting 5 seconds'/>
        </View>
    );
}

Custom time and styles:

import View from 'react-native';
import Usnack from 'Usnack';

function example() {
    Usnack.show({
        duration: 5000,
        effect_duration: 500,
    });

    return (
        <View>
            <Usnack.component
                text='Slow fade in and out ;)'
                containerStyle={{
                    top: 'inherit',
                    bottom: 100,
                }}
            />
        </View>
    );
}

Contributing

Any contribution or support to this project in the form of a issue, pull request or message will be highly appreciated. ❤️

You can read more about it right here. Don't be shy :)

License

Usnack is open-source software licensed under the MIT license.

1.0.0

3 years ago

0.0.2

3 years ago

0.0.1

3 years ago