Stories-react-bd NPM

Install

npm install --save stories-react

Demo

You can find working demo here

Usage

import React from 'react';
import Stories from 'stories-react';
import 'stories-react/dist/index.css';

export default function ImagesStories() {
  const stories = [
    {
      type: 'image',
      url: 'https://images.pexels.com/photos/9470805/pexels-photo-9470805.jpeg?w=300',
      duration: 5000,
    },
    {
      type: 'image',
      duration: 6000,
      url: 'https://images.pexels.com/photos/9733197/pexels-photo-9733197.jpeg?w=300',
    },
    {
      duration: 7000,
      type: 'image',
      url: 'https://images.pexels.com/photos/9470805/pexels-photo-9470805.jpeg?w=300',
    },
  ];

  return <Stories width="400px" height="600px" stories={stories} />;
}

Props

Property	Type	Default	Description
`stories`	`IStoryObject[]`	`[]`	An array of story objects. description of `IStoryObject` is mentioned below
`height`	`string`	`100%`	Height of story container
`width`	`string`	`100%`	Width of story container
`onStoryChange`	`function(index:number)`	`-`	Callback called when story changes
`onStoriesStart`	`function`	`-`	Callback called when first story is rendered. it get called only once,
`onAllStoriesEnd`	`function`	`-`	Callback called when last story gets completed. it will get called only once
`currentIndex`	`number`	`-`	Current index of the story which should be selected first
`defaultDuration`	`number`	`10000`	default duration in ms of stories if duration is not provided in the `IStoryObject`
`classNames`	`IStoryClassNames`	`{}`	classnames to overide different sections of a story renderer
`pauseStoryWhenInActiveWindow`	`boolean`	`true`	pauses story when window goes out of focus (user changes tab/minimizes browser etc

IStoryObject

Property	Type	Default	Description
`type`	`image , video , component`	`-`	type of story to render
`url`	`string`	`-`	url of a story (image & video only)
`duration`	`duration`	`10000`	duration in ms of the story
`component`	`React Component`	`-`	custom component to render as a story
`header`	`React Component`	`-`	header of a story
`seeMore`	`string , boolean , React Component`	`true`	See more action text
`seeMoreComponent`	`React Component`	`-`	see more component opens after clicking see more
`onSeeMoreClick`	`function(index:number)`	`-`	Callback called when story see more is clicked

IStoryClassNames

Property	Type	Default	Description
`main`	`string`	`-`	classname for main container
`progressContainer`	`string`	`-`	classname for progress line container
`progressBarContainer`	`string`	`-`	classname for single progress bar box container
`progressBar`	`string`	`-`	classname for progress bar
`storyContainer`	`string`	`-`	classname for story container

Custom Component Story Props

Property	Type	Description
`pause`	`function`	call it to pause a story
`resume`	`function`	call it to resume a story
`story`	`IStoryObject`	current story properties
`isPaused`	`boolean`	state of a story

reactjs typescript instagram stories

ansi-styles autoprefixer boolbase acorn braces browserslist buffer-from balanced-match caniuse-api brace-expansion builtin-modules chalk ci-info color-name color-convert caniuse-lite commondir convert-source-map colord concat-with-sourcemaps css-blank-pseudo commander css-declaration-sorter css-select css-prefers-color-scheme css-has-pseudo css-tree css-what cssdb cssesc cssnano-utils debug diff-sequences csso deepmerge domelementtype dom-serializer domhandler domutils cssnano-preset-default csstype entities estree-walker escape-string-regexp electron-to-chromium escalade expect eventemitter3 find-cache-dir fill-range fs.realpath fraction.js find-up fsevents generic-names fs-extra glob function-bind gensync has-flag graceful-fs icss-utils icss-replace-symbols import-cwd globals hasown inflight inherits is-module import-from is-builtin-module is-core-module is-number is-reference jest-diff jest-matcher-utils jest-message-util js-tokens jest-get-type jest-util jsonfile jest-worker json5 lilconfig jsesc lodash.camelcase locate-path loader-utils lru-cache lodash.memoize lodash.uniq magic-string loose-envify mdn-data make-dir ms minimatch merge-stream micromatch nanoid once node-releases normalize-url p-limit normalize-range p-finally p-locate nth-check p-try p-timeout path-exists path-parse p-queue picocolors pify pkg-dir postcss-calc postcss-attribute-case-insensitive picomatch postcss-clamp postcss postcss-color-functional-notation postcss-color-hex-alpha postcss-colormin postcss-convert-values postcss-color-rebeccapurple postcss-custom-media postcss-custom-properties postcss-discard-comments postcss-custom-selectors postcss-dir-pseudo-class postcss-discard-overridden postcss-discard-duplicates postcss-discard-empty postcss-focus-visible postcss-font-variant postcss-focus-within postcss-double-position-gradients postcss-gap-properties postcss-image-set-function postcss-initial postcss-logical postcss-load-config postcss-merge-rules postcss-lab-function postcss-merge-longhand postcss-minify-gradients postcss-minify-params postcss-minify-font-values postcss-modules-extract-imports postcss-modules-scope postcss-modules postcss-minify-selectors postcss-modules-local-by-default postcss-nesting postcss-modules-values postcss-normalize-display-values postcss-normalize-positions postcss-normalize-repeat-style postcss-normalize-string postcss-normalize-unicode postcss-normalize-whitespace postcss-normalize-charset postcss-normalize-timing-functions postcss-normalize-url postcss-opacity-percentage postcss-ordered-values postcss-overflow-shorthand postcss-page-break postcss-place postcss-pseudo-class-any-link postcss-reduce-initial postcss-selector-not postcss-reduce-transforms postcss-replace-overflow-wrap postcss-unique-selectors postcss-selector-parser pretty-format promise.series randombytes react-dom postcss-svgo postcss-value-parser react-is react resolve rollup-pluginutils resolve-from safe-identifier safe-buffer scheduler semver serialize-javascript slash source-map source-map-js stack-utils source-map-support stable string-hash stylehacks style-inject supports-color svgo terser supports-preserve-symlinks-flag to-regex-range tslib to-fast-properties universalify util-deprecate update-browserslist-db wrappy yallist undici-types yaml

@everything-registry/sub-chunk-2829

1.1.2

6 months ago