0.2.1 • Published 8 months ago
ngx-stories v0.2.1
Ngx Stories
An Angular component to render instagram like stories.
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[] = [
{
name: 'John Doe',
stories: [
{ type: 'image', content: 'https://example.com/story1.jpg' },
{ type: 'component', content: CustomComponent }, // pass any angular component to render in stories
],
},
{
name: 'Jane Smith',
stories: [
{ type: 'image', content: 'https://example.com/story3.jpg' },
{ 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. |
triggerOnStoryChange | EventEmitter<object> | No | Output event that is triggered when the user changes the story. |
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.
- Auto-assigning unique ids to storyGroups and stories.
Contributing
License
This library is licensed under the MIT License. Feel free to use and modify the code as per your needs.
0.1.0
10 months ago
0.2.1
8 months ago
0.2.0
10 months ago
0.0.8
10 months ago
0.0.7-beta.13
11 months ago
0.0.7-beta.8
11 months ago
0.0.7-beta.9
11 months ago
0.0.7-beta.6
12 months ago
0.0.7-beta.7
12 months ago
0.0.7-beta.4
12 months ago
0.0.7-beta.5
12 months ago
0.0.7-beta.2
12 months ago
0.0.7-beta.3
12 months ago
0.0.7-beta.1
12 months ago
0.0.7-beta.10
11 months ago
0.0.7-beta.11
11 months ago
0.0.7-beta.12
11 months ago
0.0.5
12 months ago
0.0.7
12 months ago
0.0.6
12 months ago
0.0.4
1 year ago
0.0.3
1 year ago
0.0.2
1 year ago
0.0.1
1 year ago