@9gustin/storify-react 中文文档教程

Question

storify :D

React 应用的故事

v1:

NPM package that show stories in a line (ordered by relevance and date)

URL

将

How to use

包添加到你的应用程序中

npm i @9gustin/storify-react

Short

App.js

import React from 'react';
import {Storify, useStorify} from '@9gustin/storify-react';
import '@9gustin/storify-react/dist/index.css'
import initialState from './data/stories.json';

function App() {
  const { stories } = useStorify(initialState.stories);

  return (
    <Storify imgSize="5rem" storyBorderColor="blue" stories={stories} viewProfileCallback={(user) => {console.log(user)}}/>
  );
}

export default App;

Detailed

https://www.npmjs.com/package/@9gustin/storify-react component and custom hook

import {Storify, useStorify} from '@9gustin/storify-react';

useStorify (Custom Hook)

Param	Type	Description
initialStories	Story[]	represent the list of stories to start the state variable

Return	Type	Description
stories	Story[]	represent the list of stories that are managed in the state, and you should pass it to the Storify component
addStories	Function:void	that function gives you the possibility to add stories, and that's rendered in the Storify component
setStories	Function:void	that function give you the possibility to set the list of stories, and that's rendered in the Storify component

Use:

    const { stories, addStories, setStories } = useStorify(initialStories);

Storify (Component)

Prop Name	Type	Description
imgSize	string	represent the size of story buttons, receive the css property "width"/"height"
stories	Story[]	represent the list of stories that the component should render
viewProfileCallback	Function:User	the function that would be called when the user wants to view an user profile
storyBorderColor	string	represent the color of story buttons borders, that receive the css property border-color

Use:

    <Storify imgSize="5rem" storyBorderColor="blue" stories={stories} viewProfileCallback={(user) => {console.log(user)}}/>

Models

Story

Property	Type	Description
user	User	the owner of story
id	string	the identificator of story
createdAt	string	the creation date of story
imageUrl	number	the url of story image

User

Property	Type	Description
username	string	the identificator of a user
imageUrl	string	the url of user profile image
relevance	number	the stories are ordered firstly for the user relevance

About the order of stories

故事（在故事的时间轴中按用户的相关性排序，在故事的createdAt属性之后，首先显示有新故事的用户）。 当用户点击查看来自用户的故事时，会按日期升序（从旧到新）显示

Import styles

import '@9gustin/storify-react/dist/index.css'

Future releases:

• Next story automatically, with time/progress bar
• Save actual user in state
• take response to stories, with a custom callback
• Button "Add story" with a custom callback
• Custom stories(colors, to group of persons)

License

MIT © 9gustin