Media Library

A reusable React component library for managing media files in CleverWeb services.

Installation

yarn add cleverweb-medialibrary

import { ThemeProvider } from "@/components/theme-provider"
import { Toaster } from 'react-hot-toast'
import { QueryClientProvider, QueryClient } from 'react-query'
import AppRoutes from './AppRoutes'
import MediaLibrary, { mediaDefault } from "cleverweb-medialibrary"
import useAppStore from "./store/appStore"
import { useEffect } from "react"


export const queryClient = new QueryClient()

function App() {


  const setAppState = useAppStore((state) => state.setAppState)
  const { mediaAction, selectedImages, showMediaLibrary, isMultipleSelection, defaultPage } = useAppStore((state) => state.mediaLibrary)

  const handleClose = () => {
    setAppState('mediaLibrary', { ...mediaDefault })
  }
  
  useEffect(() => {
    setAppState('mediaLibrary', { ...mediaDefault })
  },[])
  
  return (
    <ThemeProvider defaultTheme="dark" storageKey="smartai-vite-ui-theme">
      <QueryClientProvider client={queryClient}>
        <div className="z-[9000]">
          <Toaster 
          position="bottom-right"
          reverseOrder={false}
          />
        </div>
        <AppRoutes />
        {showMediaLibrary && (
              <MediaLibrary
                mediaLibraryData={{
                  mediaAction,
                  selectedImages,
                  isMultipleSelection,
                }}
                isOpen={showMediaLibrary}
                closeMediaLibrary={handleClose}
                defaultPage={defaultPage}
                token="access-token-of-the-currently-authenticated-user"
                //Base url of the media library server
                baseUrl="https://test.cleverweb.io/api/v1/"
                setAppState={setAppState}
              />
            )}
      </QueryClientProvider>
    </ThemeProvider>
  )
}
 
export default App