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 ( <Modal show={show} onHide={handleClose} size="sm"> <div style={{ display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", // width:"10vw" }} > <Stories stories={convertedStories} renderers={[{ renderer, tester }]} seeMore={<WithSeeMore />} height={"90vh"} // width={"100vw"} /> </Modal> ); };

export default App;

[mohitk05]

@ExplorerAadi sure, you can submit a PR!