React Ritik Stories

It Provides a very efficient way to add a feature like insta stories.

Preview

See Demo : https://reactritikstories.netlify.app/

How to use ?

import { Container } from "react-ritik-stories";

const App=()=>{

    return(
        <Container
        width={window.innerWidth}
        height={window.innerHeight}
        comps={[
        {
            name: A,   // Component name
            props: { width: window.innerWidth, height: window.innerHeight },  // Component Props
        },
        {
            name: B,
        },
        {
            name: C,
        },
        {
            name: D,
        },
        ]}
        background="black"
        color="white"
        tabBarActive="white"
        tabBarNotActive="gray"
        arrowActiveColor="white"
        arrowNotActiveColor="gray"
        isArrowShown={true}
        isKeyboardActive={true}
    />
    )
}

Props

Property	Type	Default	Description
width	Number	400	Sets the width of Container
height	Number	600	Sets the height of Container
comps	[Object]	[ ]	An array of objects with, each object with name and props property
background	String	"black"	Sets the background color of Container
color	String	"white"	Sets the color of Container
tabBarActive	String	"white"	Sets the color of active tab bar
tabBarNotActive	String	"gray"	Sets the color of not active tab bar
arrowActiveColor	String	"white"	Sets the color of active arrow
arrowNotActiveColor	String	"gray"	Sets the color of not active arrow
isArrowShown	Boolean	true	Whether the left and right arrows are shown or not
isKeyboardActive	Boolean	true	Is keyboard LeftArrow and RightArrow can change the Component

Comp Object

Property	Type	Description
name	Component	Pass Component Name
props	Object	Any additional Props that should be sent to Component

By RavishingRitik16