Facebook Story

React components to create components associated with Facebook like Story

Features

Done	Name
✅	Create text-based story
✅	Create image-based story
✅	View text-based story
✅	View image-based story
✅	Story card (with countdown)
⬜️	Background music in text/image story

Installation

Install my-project with npm

npm install facebook-story
# or
yarn add facebook-story

Demo

You can find the demo here

Component References

Text story form

<TextStoryForm
  onCancel={reset}
  onSubmit={onSubmit}
  maxLength={100}
  onExceedMaxLength={() => alert('Exceed max length')}
  labels={{
    addTextLabel: 'Add text',
    cancelBtnLabel: 'Cancel',
    changeColorLabel: 'Change color',
    previewLabel: 'Preview',
    saveBtnLabel: 'Save',
  }}
/>

prop	Type	Description
onCancel	function: () => void	Required. Function to handle cancellation logic for story text form
onSubmit	function: (text: string) => void	Required. Function to call when submitting story text form
labels	TLables	Custom heading labels for parts of text story form
maxLength	number	Maximum number of characters of text story form
onExceedMaxLength	function: () => void	Function to call when input text exceeds the maximum number of characters

TLabels;

key	Type	Description
addTextLabel	string	Label of add text secion (Default: Add your text here)
previewLabel	string	Label of preview section (Default: Preview)
saveBtnLabel	string	Label of save button (submit button)
cancelBtnLabel	string	Label of cancellation button
changeColorLabel	string	Label of change background color section
changeFontLabel	string	Label of change text font family

Image Story Form

<ImageStoryForm
  onCancel={reset}
  onSubmit={onSubmit}
  uploadType={EImageFormUploadType.File}
  uploadFunction={uploadMediaFunction}
  width={300}
  height={300}
  labels={{
    addTextBtnLabel: 'Add text',
    cancelBtnLabel: 'Cancel',
    deleteSelectionsBtnLabel: 'Delete selections',
    saveBtnLabel: 'Save',
    textColorLabel: 'Text color',
  }}
  textProperties={{
    name: 'text',
    color: '#000000',
    fontSize: 20,
    fontFamily: 'Arial',
    fontWeight: 'bold',
    placeHolder: 'Enter text',
    textAlign: 'center',
  }}
/>

prop	Type	Description
onCancel	function: () => void	Required. Function to handle cancellation logic for story text form
onSubmit	function: (text: string) => void	Required. Function to call when submitting story text form
textProperties	TTextProperties	Custom text properties of text object in image story
labels	TLabels	Custom heading labels for parts of image story form
width	number	Required. Width of the cavas holds the image story view
height	number	Required. Height of the cavas holds the image story view
uploadType	link | file	Required. Type of uploading image, you can choose between link of uploaded image or upload your own image from your computer
uploadFunction	(file: File) => Promise<string>	Required of uploadType = 'file'. Upload function of image uploaded from your computer. Should returns a link

TTextProperties;

key	Type	Description
placeHolder	string	Default text when adding new text to image story
color	string	Text color
fontSize	number	Font-size of text
fontFamily	string	Font family of text (make sure you imported that font into your project)
fontWeight	string	Font weight of text
textAlign	left | center | right | justify	Alignment of text
name	string	Name of object holds the text

TLabels;

key	Type	Description
addTextLabel	string	Label of add text secion (Default: Add your text here)
textColorLabel	string	Label of changing text color input section
deleteSelectionsBtnLabel	string	Label of deleting selected objects button)
saveBtnLabel	string	Label of submit button
cancelBtnLabel	string	Label of cancellation button

Image Story Viewer

const data = {
    objects: Object[]; // see more in fabric.Object
    width: 500,
    height: 500
}

<ImageStoryViewer data={data} height={300} width={300}/>

prop	Type	Description
data	TData	Required. Data of image story
width	number	Required. Width of current canvas holds rendering field for image story
height	number	Required. Height of current canvas holds rendering field for image story

TData;

key	Type	Description
objects	fabric.Object[]	Required.Data of fabric objects to be rendered in canvas
width	number	Required.Width of canvas holds rendering field for image story in image story form
height	number	Required. Height of canvas holds rendering field for image story in image story form

Text Story Viewer

const data = {
    background: '#000',
    fontFamily: 'Arial',
    text: 'This is a text story'
}

<TextStoryViewer data={data}/>

prop	Type	Description
data	TData	Required. Data of text story

TData;

key	Type	Description
background	string	Required. Background of text story
fontFamily	string	Required. Font family of text story
text	string	Required. Content of text story

Story Card

<StoryCard data={data} width={200} height={200} />

prop	Type	Description
data	TStoryCardData[]	Required. Data of story card
width	number	Required. Width of story card
height	number	Required. Height of story card

TStoryCardData;

key	Type	Description
type	"Image" | "Text" | "Unknown"	Required. Type of story
content	string	Required. Content of story (stringified of json data from the create story form)

License

MIT