Skip to content

Latest commit

 

History

History
92 lines (76 loc) · 4.02 KB

README.md

File metadata and controls

92 lines (76 loc) · 4.02 KB
Raw

Ngx Stories

An Angular component to render instagram like stories.

npm downloads npm version

For Version 17+

Installation

Install the library via npm:

npm install ngx-stories
import { NgxStoriesComponent, StoryGroup } from 'ngx-stories';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [NgxStoriesComponent],
  templateUrl: './app.component.html',
  styleUrl: './app.component.css'
})
export class AppComponent {
  storyGroups: StoryGroup[] = [
      {
        id: 1,
        name: 'John Doe',
        stories: [
          { id: 101, type: 'image', content: 'https://example.com/story1.jpg' },
          { id: 101, type: 'component', content: CustomComponent }, // pass any angular component to render in stories
        ],
      },
      {
        id: 2,
        name: 'Jane Smith',
        stories: [
          { id: 103, type: 'image', content: 'https://example.com/story3.jpg' },
          { id: 3, type: 'video', content: 'https://example.com/video-story.mp4' },
        ],
      },
    ];
  }
<ngx-stories [storyGroups]="storyGroups"></ngx-stories>

Properties

Property Type Required Description
storyGroups StoryGroup[] Yes An input property that accepts an array of story groups. Each group contains a list of stories to display.
options NgxStoriesOptions No Configuration options for the story display. Options include width and height to customize the dimensions.
triggerOnEnd EventEmitter<void> No Output event that is triggered when the user reaches the end of all stories.
triggerOnExit EventEmitter<void> No Output event that is triggered when the user manually exits the story view.
triggerOnSwipeUp EventEmitter<void> No Output event that is triggered when the user performs a swipe-up gesture, typically for additional actions.
onStoryGroupChange EventEmitter<number> No Output event that is triggered when the user changes the storyGroup. 
interface NgxStoriesOptions {
  width: number, // width of story
  height: number, // height of story
  currentStoryIndex: 0, // index from where stories should start
  currentStoryGroupIndex: 0, // index from where story group should start
  backlitColor: string // background color of story default is #1b1b1b
}

Features

  • Dynamic Story Carousel: Display a collection of stories for each storyGroup.
  • Easy Integration: Simple and straightforward to integrate into your Angular project.
  • Story Progress Tracker: Track the progress of each story as the user navigates through the stories.
  • Swipe Gestures (Mobile Friendly): Allow users to swipe left or right to navigate through the stories.
  • Hold to Pause: Pause the story progress when the user holds their finger on the screen.
  • Events: Trigger events when the user reaches the end of the stories or when they exit the carousel.
  • Keyboard navigation(Experimental).
  • Loading: A Loading svg will be shown when story buffers (SVG from Animated SVG Preloaders by SVGBackgrounds.com)
  • Audio controls: Toggle audio on/off for stories that have audio.
  • Component based stories for best control.

Contributing

Contributing Guide

License

This library is licensed under the MIT License. Feel free to use and modify the code as per your needs.