@knovator/masters-admin

ReactJS package to integrate masters/submasters functionality to ReactJS/NextJS application.
Explore the docs »

View Demo · Report Bug · Request Feature

Table of Contents

1. About The Project
   • Built With
2. Getting Started
   • Prerequisites
   • Installation
3. Usage
   • Provider
   • Master
   • SubMaster
   • ImageUpload
4. Usecases
5. Contributing
6. Contact

About The Project

@knovator/masters-admin is built with intent to faster web app development cycle by providing plug & play facility for masters/submasters, that is used almost on every project.

(back to top)

Built With

• React.js
• Rollup
• classnames
• react-beautiful-dnd
• react-dropzone
• react-hook-form
• react-table
• react-transition-group
• typescript

(back to top)

Getting Started

@knovator/masters-admin is designed to be used in ReactJS/NextJS project.

Prerequisites

Following packages are required to exists/installed to use @knovator/masters-admin in the project.

• @knovator/api
• react
• react-dom
• react-hook-form
• react-table

Installation

npm install @knovator/masters-admin
# or
yarn add @knovator/masters-admin

(back to top)

Usage

Provider

@knovator/masters-admin uses Context API, to support communication between components. So, Masters/Submaster should be wraped by Provider.

import { Provider } from '@knovator/masters-admin`;

function App() {
    return (
        <Provider
            ...
        >
            ...
        </Provider>
    )
}

Props

• token
  • JWT token to be sent along the requests
• baseUrl
  • Base API url, without forward slash at end i.e. https://api.xy000z.in
• dataGetter (optional)
  • function to get docs from axios API response

  // default
  (response) => response.data.docs

• paginationGetter (optional)
  • function to get pagination data from axios API response

  // default
  (response) => response.data

• onError(callback_code, code, message) (optional)
  • callback to execute on error
• onSuccess(callback_code, code, message) (optional)
  • callback to execute on success
• onLogout (optional)
  • callback to execute on API request with unauthorized code in body

Master

Please check in masters.md

SubMaster

Plase check in submasters.md

ImageUpload

• Provide Image Upload component to use in Forms

Props

• className (optional) => string
• text => string | JSX.Element to show inside component
• maxSize => number Max size for image to upload
• imgId => string | ImageObjectProps
  • Image Url or ImageObjectProps mentioned in data-formats
• setImgId => (value?: string | null) => void
• clearError (optional) => () => void
• onError => (msg: string) => void
• onImageUpload => (file: File) => Promise<{ fileUrl: string; fileId: string } | void>
  • Gets called when user uploads file, it should return fileUrl and fileId
• onImageRemove (optional) => (id: string) => Promise<void>
  • Gets called when user removes the image
• baseUrl => string
  • Gets used when showing image
• error (optional) => string

(back to top)

Usecases

@knovator/masters is combination of two packages @knovator/masters-admin and @knovator/masters-admin. It is designed plug and play masters module in your project. It is useful in following cases:

• Your app needs master, submaster facility to build things like state with city, experiences with skills, categories with subcategories etc.
• You want to let admin manage masters and submasters data from admin panel.
• You want to show masters and submasters data somewhere in your app.

If you have any other usecase, please open an issue with tag usecase. We will try to add it in our roadmap.

(back to top)

Contributing

Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated.

If you have a suggestion that would make this better, please fork the repo and create a pull request. You can also simply open an issue with the tag "enhancement". Don't forget to give the project a star! Thanks again!

1. Fork the Project
2. Create your Feature Branch (git checkout -b feature/AmazingFeature)
3. Commit your Changes (git commit -m 'Add some AmazingFeature')
4. Push to the Branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

(back to top)

License

Distributed under the MIT License. See LICENSE.txt for more information.

(back to top)

Contact

Knovator Technologies

• Twitter @knovator
• Web https://knovator.com/

Project Link: https://github.com/knovator/masters-admin

(back to top)