diff --git a/README.md b/README.md index 27c02bc..d77f0ce 100644 --- a/README.md +++ b/README.md @@ -1,27 +1,106 @@ -# react-native-live-stories +# React Native Live Stories [![npm version](https://badge.fury.io/js/%40blackbox-vision%2Freact-native-live-stories.svg)](https://badge.fury.io/js/%40blackbox-vision%2Freact-native-live-stories) [![License: MIT](https://img.shields.io/badge/License-MIT-brightgreen.svg)](https://opensource.org/licenses/MIT) -An Instagram video stories component +:rocket: An Instagram Stories like component. + +## Table of contents + +- [Use Case](#use-case) +- [Compatibility](#compatibility) +- [Installation](#installation) + - [NPM](#npm) + - [YARN](#yarn) +- [Example Usage](#example-usage) +- [Component API](#component-api) +- [Browser support](#browser-support) +- [Issues](#issues) +- [Contributing](#contributing) +- [License](#license) + +## Use Case + +You need a component for rendering Instagram like stories. + +## Compatibility + +Since this library does internal use of hooks you need `React >= 16.8.0`. ## Installation -```sh -npm install react-native-live-stories +You can install this library via NPM or YARN. + +### NPM + +```bash +npm i @blackbox-vision/react-native-live-stories ``` -## Usage +### YARN -```js -import LiveStories from "react-native-live-stories"; +```bash +yarn add @blackbox-vision/react-native-live-stories +``` + +## Example Usage -// ... +After reading and performing the previous steps, you should be able to import the library and use it like in this example: -const result = await LiveStories.multiply(3, 7); +```javascript +import React, { useState } from 'react'; +import { StoryPreview } from '@blackbox-vision/react-native-live-stories'; + +const InstaStories = (props) => { + return ( + + ); +}; ``` +## Component API + +The `StoryPreview` component has the following props: + +| Properties | Types | Default Value | Description | +| ----------------------- | ----------- | ------------- | ---------------------------------------------- | +| stories | array | none | An array of stories to be rendered | +| style | `ViewStyle` | none | Styles for FlatList mini stories container | +| onStoryDetailItemNext | function | none | Callback fired when drag to next item | +| onStoryDetailBackPress | function | none | Callback fired when on back button press | +| onStoryPreviewItemPress | function | none | Callback fired when performed click on preview | +| StoryDetailItemHeader | component | none | Component for Header in Story Detail Item | +| StoryDetailItemFooter | component | none | Component for Footer in Story Detail Item | + +## Issues + +Please, open an [issue](https://github.com/BlackBoxVision/react-native-live-stories/issues) following one of the issues templates. We will do our best to fix them. + ## Contributing -See the [contributing guide](CONTRIBUTING.md) to learn how to contribute to the repository and the development workflow. +If you want to contribute to this project see [contributing](https://github.com/BlackBoxVision/react-native-live-stories/blob/master/CONTRIBUTING.md) for more information. ## License -MIT +Distributed under the **MIT license**. See [LICENSE](https://github.com/BlackBoxVision/react-native-live-stories/blob/master/LICENSE) for more information.