https://github.com/knovator/masters-admin
ReactJS package to integrate masters/submasters functionality to ReactJS/NextJS application.
https://github.com/knovator/masters-admin
knovator masters reactjs submasters
Last synced: about 1 month ago
JSON representation
ReactJS package to integrate masters/submasters functionality to ReactJS/NextJS application.
- Host: GitHub
- URL: https://github.com/knovator/masters-admin
- Owner: knovator
- License: mit
- Created: 2022-06-24T10:48:12.000Z (almost 3 years ago)
- Default Branch: main
- Last Pushed: 2025-03-10T08:54:15.000Z (2 months ago)
- Last Synced: 2025-04-11T11:50:10.796Z (about 1 month ago)
- Topics: knovator, masters, reactjs, submasters
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/@knovator/masters-admin
- Size: 947 KB
- Stars: 5
- Watchers: 2
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
@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
## 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.
### Built With
* [React.js](https://reactjs.org/)
* [Rollup](https://rollupjs.org)
* [classnames](https://www.npmjs.com/package/classnames)
* [react-beautiful-dnd](https://www.npmjs.com/package/react-beautiful-dnd)
* [react-dropzone](https://www.npmjs.com/package/react-dropzone)
* [react-hook-form](https://www.npmjs.com/package/react-hook-form)
* [react-table](https://www.npmjs.com/package/react-table)
* [react-transition-group](https://www.npmjs.com/package/react-transition-group)
* [typescript](https://www.typescriptlang.org)
## 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](https://www.npmjs.com/package/@knovator/api)
- [react](https://www.npmjs.com/package/react)
- [react-dom](https://www.npmjs.com/package/react-dom)
- [react-hook-form](https://www.npmjs.com/package/react-hook-form)
- [react-table](https://www.npmjs.com/package/react-table)
### Installation
```sh
npm install @knovator/masters-admin
# or
yarn add @knovator/masters-admin
```
## Usage
### Provider
`@knovator/masters-admin` uses **Context API**, to support communication between components. So, `Masters`/`Submaster` should be wraped by `Provider`.
```js
import { Provider } from '@knovator/masters-admin`;
function App() {
return (
...
)
}
```
**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
```js
// default
(response) => response.data.docs
```
- `paginationGetter` (*optional*)
- function to get pagination data from axios API response
```js
// 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](masters.md)
### SubMaster
Plase check in [submasters.md](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](data-formats.md)
- `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`
- Gets called when user removes the image
- `baseUrl` => string
- Gets used when showing image
- `error` (*optional*) => string
## 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.
## 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
## License
Distributed under the MIT License. See `LICENSE.txt` for more information.
## Contact
Knovator Technologies
- Twitter [@knovator](https://twitter.com/knovator)
- Web [https://knovator.com/](https://knovator.com/)
Project Link: [https://github.com/knovator/masters-admin](https://github.com/knovator/masters-admin)