Skip to content

Commit

Permalink
📝 Add Customization section to README
Browse files Browse the repository at this point in the history
  • Loading branch information
cooperka committed Jul 3, 2017
1 parent 8d709d4 commit 3e32944
Showing 1 changed file with 27 additions and 11 deletions.
38 changes: 27 additions & 11 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ They animate up from the bottom of the screen and then disappear shortly afterwa
See Google's [Material Design guidelines](https://material.io/guidelines/components/snackbars-toasts.html) for more info on Snackbars
and when to use them.

## Code
## How it works

```js
Snackbar.show({
Expand All @@ -28,9 +28,8 @@ Or, to include an action button:

```js
Snackbar.show({
backgroundColor: 'gray',
title: 'Hello world',
duration: Snackbar.LENGTH_LONG,
duration: Snackbar.LENGTH_INDEFINITE,
action: {
title: 'UNDO',
color: 'green',
Expand All @@ -39,16 +38,8 @@ Snackbar.show({
});
```

Where `duration` can be one of the following:

- `Snackbar.LENGTH_SHORT` (about a second)
- `Snackbar.LENGTH_LONG` (about three seconds)
- `Snackbar.LENGTH_INDEFINITE` (stays on screen until the button is pressed)

## Installation

Here's how to use it:

1. Install:
- Using [npm](https://www.npmjs.com/#getting-started): `npm install react-native-snackbar --save`
- Using [Yarn](https://yarnpkg.com/): `yarn add react-native-snackbar`
Expand All @@ -63,6 +54,31 @@ Here's how to use it:
import Snackbar from 'react-native-snackbar';
```

## Customization

`Snackbar.show()` accepts the following options:

| Key | Data type | Default value? | Description |
|-----|-----------|----------------|-------------|
| `title` | `string` | Required. | The message to show. |
| `duration` | See below | `Snackbar.LENGTH_SHORT` | How long to display the Snackbar. |
| `action` | `object` (described below) | `undefined` (no button) | Optional config for the action button (described below). |
| `backgroundColor` | `string` or `style` | `undefined` (natively renders as black) | The background color for the whole Snackbar. |

Where `duration` can be one of the following (timing may vary based on device):

- `Snackbar.LENGTH_SHORT` (just over a second)
- `Snackbar.LENGTH_LONG` (about three seconds)
- `Snackbar.LENGTH_INDEFINITE` (stays on screen until the button is pressed)

And the optional `action` object can contain the following options:

| Key | Data type | Default value? | Description |
|-----|-----------|----------------|-------------|
| `title` | `string` | Required. | The text to show on the button. |
| `onPress` | `function` | `undefined` (Snackbar is simply dismissed) | A callback for when the user taps the button. |
| `color` | `string` or `style` | `undefined` (natively renders as white) | The text color for the button. |

## Notes

A few people have [suggested](https://github.com/cooperka/react-native-snackbar/issues/2)
Expand Down

0 comments on commit 3e32944

Please sign in to comment.