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