Major Update: Add renderers to handle story displaying logic

[mohitk05]

This PR includes changes to the way a story is displayed inside the component container. Due to several issues being raised for unpredictable loading states, race issues in the progress bar, this looks like a good solution to isolate the rendering of content by providing necessary properties to it.

The renderer logic is heavily inspired by the open-source project JSON Forms.

The logic works as follows:

• Every story will be assigned a suitable renderer according to various conditions exposed by the renderer.
• Every renderer exposes a renderer property which is a functional component and a tester which is a function.

// ImageRenderer.tsx

export const renderer = (props) => {
    return <img src={props.story.url} />
}

export const tester = (story) => {
    return !story.type || story.type === 'image';
}

• Whenever the stories array changes, renderers are assigned. The component goes through each renderer's tester function and returns the first one that matches the condition.
• The list of renderers will be generated by concatenating internal renderers and the ones provided through the new prop renderers.

In all, it affects the internal working in the following ways:

Use renderers internally

All the hacky, conditional logic to check what to render in the story container has been replaced by internal default renderers for image and video. Custom content remains untouched due to this - if the content prop in the story object is not undefined, then the value of the content prop will be the renderer by default.

Possible to create re-usable renderers

Similar to any other plugin system, this creates a possibility to create shared renderers. If you build one, you can host it on a public registry like npm and let others use it directly.

Expose WithHeader and WithSeeMore as named exports

Now the package would also include these two named exports so that one can directly use the header/see more functionality when creating custom content.

Breaking ⚠️
Since the rendering is now isolated to renderers, whenever a story changes, the progress would pause by default. Till now, there was a check written internally that if a custom content is sent, the progress should start playing immediately. But now this behaviour would be inconsistent.

There will be no breaking changes and this will be a 2.1.0 release.

I believe this change would help increase the customisability of this component. Do let me know if you have any suggestions, I plan to merge this PR in a few days if everything looks good. You can join the Discord server here.

[vercel]

This pull request is being automatically deployed with Vercel (learn more).
To see the status of your deployment, click below or on the icon next to each commit.

🔍 Inspect: https://vercel.com/mohitk05/react-insta-stories/ebxgzuogf
✅ Preview: https://react-insta-stories-git-feature-renderers.mohitk05.vercel.app