Request: Add URL field to header

[kien-pham]

Hello,

I'm using RIS, it's very nice. I have a request, I would like to add link to header, user can click to avatar and it will redirect to other page.

I hope it will be added on next version.

[mohitk05]

Hey @kien-pham, that is a good idea. A possible solution could be to allow passing a custom header. Will scope it for future releases.

[ExplorerAadi]

Hey @mohitk05 , Can I take up this feature?
I believe a custom header component shouldn't be necessary because when we pass content then we define our own headers anyway right? That's how I added a header link in our project.

But if someone is using the header prop of the library then a good solution would be to just add another field like externalLink. Here is an example from a draft request where I implemented this. Please let me know what you think about it and what are the improvements you suggest?

[hassnain9166]

Hi, @kien-pham can help me to add a header I did not able to use it import Modal from "react-bootstrap/Modal";
import React from "react";
import Stories, {
WithSeeMore,
WithVideo,
WithHeader,
} from "react-insta-stories";

export const renderer = ({ story, action, isPaused, config }) => {
if (story.file_type === "video") {
return (

<video
src={story.file}
autoPlay={action === "play"}
muted={!isPaused}
/>

);
} else if (story.file_type === "image") {
return (

);
} else {
return null;
}
};

export const tester = (story) => {
return {
condition: story.file_type === "video" || story.file_type === "image",
priority: 3,
};
};

const App = ({ file, show, handleClose, profile_image }) => {
const convertedStories = file?.map((story) => {
if (story.file_type === "image") {
return { url: story.file, type: "image" };
} else if (story.file_type === "video") {
return { url: story.file, type: "video" };
}
});
return (

<div
style={{
display: "flex",
flexDirection: "column",
alignItems: "center",
justifyContent: "center",
// width:"10vw"
}}
>
<Stories
stories={convertedStories}
renderers={[{ renderer, tester }]}
seeMore={}
height={"90vh"}
// width={"100vw"}
/>


);
};

export default App;

[mohitk05]

@ExplorerAadi sure, you can submit a PR!