Skip to content
zifi - Make Stories everywhere using React 😍
JavaScript CSS HTML
Branch: master
Clone or download
Type Name Latest commit message Commit time
Failed to load latest commit information.
example Fix React Production Errors Apr 14, 2018
src Fix React Production Errors Apr 14, 2018
.eslintrc init create-react-library@2.3.3 Mar 29, 2018
.gitignore init create-react-library@2.3.3 Mar 29, 2018
LICENSE Create LICENSE Apr 1, 2018
package.json v0.6.5 Apr 14, 2018
rollup.config.js Fixed styled-components bug 🚀 Apr 1, 2018
zifi.png Add Logo Apr 1, 2018

zifi 🦄

Make Stories everywhere using React ♥

Zifi Logo

NPM JavaScript Style Guide


yarn add zifi


  • Fullscreen API
  • Custom Styles
  • Responsive
  • Made with ♥

Inspired by ProductHunt Sip and Medium Series 😍


Zifi Preview


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.

import React, { Component } from 'react'

import Story from 'zifi'

class Example extends Component {
  render () {
    return (
      <Story fullScreen={true}>
            <h4>2018's Most Innovative Companies</h4>
              alt="Tim Cook" 
            <h1>2018's Most Innovative Companies are here <span role="img" >🌍</span> <span role="img" >🚀</span></h1>
            <p>Fast Company just released their picks for the 350+ most innovative companies of the year.</p>
        <Story.Item backgroundImage="linear-gradient(135deg, #fad961 0%,#f76b1c 100%)" >
            <p><strong>Fast Company </strong><span>Editorial Staff</span></p>
            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.
            <img src="" alt="Tim Cook" />
            <p>Apple won the coveted #1 spot, with its release of the much-loved iPhone X, AirPod, and ARKit platform</p>
          <p>A surprising contender, Patagonia came in sixth in part for their focus on helping the environment</p>
        <Story.Item backgroundImage="linear-gradient(135deg, #5b247a 0%,#1bcedf 100%);">
          <Button>Read More</Button>



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.


Property Type Default Description
backgroundImage string background image css property. pass url or gradient
blur string filter - blur css property.


MIT © mubaris

You can’t perform that action at this time.