zifi - Make Stories everywhere using React 😍
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
example
src Fix React Production Errors Apr 14, 2018
.babelrc init create-react-library@2.3.3 Mar 29, 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
README.md Add Progress Bars Apr 2, 2018
package.json v0.6.5 Apr 14, 2018
rollup.config.js Fixed styled-components bug 🚀 Apr 1, 2018
yarn.lock Add Progress Bars Apr 2, 2018
zifi.png Add Logo Apr 1, 2018

README.md

zifi 🦄

Make Stories everywhere using React ♥

Zifi Logo

NPM JavaScript Style Guide

Install

yarn add zifi

Features

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

Inspired by ProductHunt Sip and Medium Series 😍

Preview

Zifi 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.

import React, { Component } from 'react'

import Story from 'zifi'

class Example extends Component {
  render () {
    return (
      <Story fullScreen={true}>
        <Story.Trigger>
          <Holder>
            <h4>2018's Most Innovative Companies</h4>
            <img 
              alt="Tim Cook" 
              src="https://www.biography.com/.image/ar_1:1%2Cc_fill%2Ccs_srgb%2Cg_face%2Cq_80%2Cw_300/MTE5NDg0MDU1MzM0OTc5MDg3/tim-cook-20967297-1-402.jpg" 
              height="100px"
              width="100px"
            />
          </Holder>
        </Story.Trigger>
        <Story.Item
          backgroundImage="url(https://pi.tedcdn.com/r/tedideas.files.wordpress.com/2017/03/frugal_innovation.png)"
          blur="10px"
        >
          <Title>
            <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>
          </Title>
        </Story.Item>
        <Story.Item backgroundImage="linear-gradient(135deg, #fad961 0%,#f76b1c 100%)" >
          <Pack>
            <p><strong>Fast Company </strong><span>Editorial Staff</span></p>
          </Pack>
          <blockquote>
            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.
          </blockquote>
        </Story.Item>
        <Story.Item>
          <ImageWrapper>
            <img src="https://media.giphy.com/media/l41m0H6DL7jZd4nKM/giphy.gif" alt="Tim Cook" />
            <p>Apple won the coveted #1 spot, with its release of the much-loved iPhone X, AirPod, and ARKit platform</p>
          </ImageWrapper>
        </Story.Item>
        <Story.Item>
          <p>A surprising contender, Patagonia came in sixth in part for their focus on helping the environment</p>
        </Story.Item>
        <Story.Item backgroundImage="linear-gradient(135deg, #5b247a 0%,#1bcedf 100%);">
          <Button>Read More</Button>
        </Story.Item>
      </Story>
    )
  }
}

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