https://github.com/mubaris/zifi
zifi - Make Stories everywhere using React :heart_eyes:
https://github.com/mubaris/zifi
javascript javascript-library react react-component reactjs story
Last synced: 6 days ago
JSON representation
zifi - Make Stories everywhere using React :heart_eyes:
- Host: GitHub
- URL: https://github.com/mubaris/zifi
- Owner: mubaris
- License: mit
- Created: 2018-03-29T13:09:46.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2018-04-14T06:27:27.000Z (over 7 years ago)
- Last Synced: 2025-03-23T11:04:19.752Z (7 months ago)
- Topics: javascript, javascript-library, react, react-component, reactjs, story
- Language: JavaScript
- Homepage:
- Size: 1.8 MB
- Stars: 85
- Watchers: 5
- Forks: 10
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# zifi 🦄
> Make Stories everywhere using React ♥
[](https://www.npmjs.com/package/zifi) [](https://standardjs.com)
## Install
```bash
yarn add zifi
```
## Features
* Fullscreen API
* Custom Styles
* Responsive
* Made with ♥
Inspired by ProductHunt Sip and Medium Series 😍
## Preview
## Usage
Clicking on `Story.Trigger` triggers the `Story`. Each `Story.Item` will displayed according to user interaction.
30% of the left side will display previous story and 70% of the right side will display next story.
```jsx
import React, { Component } from 'react'
import Story from 'zifi'
class Example extends Component {
render () {
return (
2018's Most Innovative Companies
2018's Most Innovative Companies are here 🌍 🚀
Fast Company just released their picks for the 350+ most innovative companies of the year.
Fast Company Editorial Staff
The 2018 edition spans more than 350 enterprises across 35 categories, from the worlds most valuable firm to a small outfit selling natural gum to preserve rainforests.
Apple won the coveted #1 spot, with its release of the much-loved iPhone X, AirPod, and ARKit platform
A surprising contender, Patagonia came in sixth in part for their focus on helping the environment
Read More
)
}
}
```
## Props
### Story
Property|Type|Default|Description
---|---|---|---
fullScreen|bool|false|whether to show stories in full screen
progress|bool|true|whether to show progress bar
progressColor|string|#2db7f5|stroke color of the progress bar
progressWidth|number|1|width of the progress bar
progressLinecap|string|round|The shape to be used at the end of the progress bar, can be `butt`, `square` or `round`.
progressTrailColor|string|#2db7f500|Color for lighter trail stroke underneath the actual progress path.
### Story.Item
Property|Type|Default|Description
---|---|---|---
backgroundImage|string| |background image css property. pass url or gradient
blur|string| |filter - blur css property.
## License
MIT © [mubaris](https://github.com/mubaris)