Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/Gauravdarkslayer/ngx-stories
An Angular component to render instagram like stories.
https://github.com/Gauravdarkslayer/ngx-stories
angular hacktoberfest stories typescript
Last synced: 12 days ago
JSON representation
An Angular component to render instagram like stories.
- Host: GitHub
- URL: https://github.com/Gauravdarkslayer/ngx-stories
- Owner: Gauravdarkslayer
- License: mit
- Created: 2024-07-25T08:47:26.000Z (7 months ago)
- Default Branch: main
- Last Pushed: 2024-10-21T18:47:45.000Z (4 months ago)
- Last Synced: 2024-10-22T21:39:53.483Z (4 months ago)
- Topics: angular, hacktoberfest, stories, typescript
- Language: TypeScript
- Homepage: https://ngx-stories.vercel.app
- Size: 327 KB
- Stars: 17
- Watchers: 1
- Forks: 11
- Open Issues: 19
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
- awesome-angular - ngx-stories - An Angular component to render Instagram like stories. (Table of contents / Third Party Components)
- fucking-awesome-angular - ngx-stories - An Angular component to render Instagram like stories. (Table of contents / Third Party Components)
README
# Ngx Stories
An Angular component to render instagram like stories.
[](https://www.npmjs.com/package/ngx-stories)
[](https://www.npmjs.com/package/ngx-stories)
## Screenshot
## For Version 17+
## Installation
Install the library via npm:
```bash
npm install ngx-stories
```
```ts
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' },
],
},
];
}
```
```html
```
## 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` | No | Output event that is triggered when the user reaches the end of all stories. |
| `triggerOnExit` | `EventEmitter` | No | Output event that is triggered when the user manually exits the story view. |
| `triggerOnSwipeUp` | `EventEmitter` | No | Output event that is triggered when the user performs a swipe-up gesture, typically for additional actions. |
| `onStoryGroupChange` | `EventEmitter` | No | Output event that is triggered when the user changes the storyGroup.
| `triggerOnStoryChange` | `EventEmitter` | No | Output event that is triggered when the user changes the story.
```ts
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
[Contributing Guide](https://github.com/Gauravdarkslayer/ngx-stories/blob/main/CONTRIBUTING.md)
## License
This library is licensed under the MIT License. Feel free to use and modify the code as per your needs.