Beta
Search
CTRLK

FolderList

The Filenest.FolderList is used to retrieve and display your folders.

Not every provider supports folders. However, using this component won't cause any problems.
The component must be used as a child of <Filenest.Root>

Example Usage

<Filenest.FolderList
  children={({ folders, isLoading }) =>
    folders.map((Folder, index) => (
      <Folder.Root
        key={index}
        children={({ folder, rootProps }) => (
          <div {...rootProps}>
            <div>{folder.displayName || folder.key}</div>
            <Folder.Delete
              children={({ trigger, isDeleting }) => (
                <button
                  onClick={(e) => {
                    e.preventDefault()
                    e.stopPropagation()
                    trigger()
                  }}
                  disabled={isDeleting}
                >
                  Delete
                </button>
              )}
            />
          </div>
        )}
      />
    ))
  }
/>

Render Props

PropTypeDefault
folders
Array<FolderObject>
-
isLoading
boolean
-

Type References

FolderObject

PropTypeDefault
Root
(props: FolderProps) => JSX.Element
-
Delete
(props: DeleteActionProps) => JSX.Element
-

FolderProps

PropTypeDefault
children
React.ReactNode | ((props: RenderProps) => React.ReactNode)
-

RenderProps

PropTypeDefault
folder
FilenestFolder
-
rootProps
React.ComponentPropsWithoutRef<'div'>
-
state
{ isLoading: boolean }
-

DeleteActionProps

PropTypeDefault
children
React.ReactNode | ((props: RenderProps) => React.ReactNode)
-

RenderProps

PropTypeDefault
trigger
() => void
-
isDeleting
boolean
-

FilenestFolder

PropTypeDefault
id
string
-
key
string
-
displayName
string | undefined
-

On this page