patchkit-msg-list
v1.1.0
Published
Infinite-scrolling view of SSB messages
Downloads
10
Readme
Message List
Infinite-scrolling view of SSB messages
import MsgList from 'patchkit-msg-list'
import Card from 'patchkit-msg-view/card'
import Thread from 'patchkit-flat-msg-thread'
import TopNav from './my-top-nav'
import LeftNav from './my-left-nav'
import RightNav from './my-right-nav'
// message-source function
const source = (opts) => {
return ssb.createLogStream(opts)
}
// convert a message object to a gt/gte for the source() call
// - used when needing to load more
const cursor = msg => {
if (msg)
return [msg.ts, false]
}
<MsgList
threads
dateDividers
TopNav={TopNav} topNavProps={{ ... }}
LeftNav={LeftNav} leftNavProps={{ ... }}
RightNav={ThisRightNav} rightNavProps={{ ... }}
ListItem={Card} listItemProps={{ ... }}
Thread={Thread}
live={{ gt: [Date.now(), null] }}
emptyMsg={'Your feed is empty.'}
source={source}
cursor={cursor} />
Options:
ListItem
: React component to render each list item (required).Thread
: React component to render an expanded list item (optional).TopNav
: React component to render above the list (optional).LeftNav
: React component to render on the left of the list (optional).RightNav
: React component to render on the right of the list (optional).Append
: React component to render at the bottom of the list, when there's nothing more to load (optional).listItemProps
: Properties to pass to ListItem on render.topNavProps
: Properties to pass to TopNav on render.leftNavProps
: Properties to pass to LeftNav on render.rightNavProps
: Properties to pass to RightNav on render.threadProps
: Properties to pass to Thread on render.emptyMsg
: String or elements to render ifsource()
returns nothing.batchLoadAmt
: Number of messages to load each time the user scrolls to the bottom.live
: Run a live-stream? If an object, will be passed intosource()
in the live-stream call.threads
: Fetch thread data?queueNewMsgs
: Queue new messages instead of immediately inserting them? (Only applies iflive
is truthy.)showMissing
: Render messages that don't have a value?dateDividers
: Render date dividers?forceRaw
: Force all messagse to render in raw mode?source
: Function to load messages from (must return a pull-stream source).filter
: Filter on messages (must return a bool).cursor
: Function to convert message objects to a value thesource
function can accept in itsgt
parameter.
Styles
Use the .less file:
@import "node_modules/patchkit-msg-list/styles.less"