Qore Docs
  • What is Qore?
  • Getting Started
    • Start Exploring
    • Qorebase
      • Table & View
      • View Insight
      • Field Types
      • Manage Data (Import & Export)
      • Role & Permission
      • Filter & Sort
    • Qore App
      • Pages
      • Settings
      • Component
    • Create Workflow
  • ACCOUNT
    • Account Setting
  • Project
    • Manage Project
      • Create New Project
      • Customize Project
      • Delete Project
  • Table
    • Manage Table
      • Users Table
      • Create Table
      • Rename Table
      • Delete Table
      • Manage Row
    • Manage Views
      • Create Views
      • Rename Views
      • Delete View
    • Manage Field
      • Create Field
      • Update Field
      • Delete Field
    • Field Type
    • Modify Table
      • Sort
      • Filter
      • Dynamic Filter
      • Hide and Show Field
  • Component
    • Text
      • Text
      • Description Text
      • Rich Text
      • Hint Text
      • Paragraph Text
    • Media
      • Headline
      • Image
      • Embed
      • QR Code Generator
      • Barcode Generator
      • Carousel
    • List
      • List
      • List Card
      • Horizontal Tile
      • Vertical Tile
    • Button
      • Button
      • Button Bar
      • Menu Grid
      • Icon Button
      • Floating Button
    • Custom Component
      • Props
      • Example
  • FAQ
    • How to display Image in Qore App
      • Gallery Component
      • Headline Component
      • Image Component
      • Horizontal Tile Component
      • List Component
      • List Card Component
      • Vertical Tile Component
    • How to display filtered data from table
    • How to filter data on table/view
      • Save configuration filter on table/view
  • Usecase
    • Create list of restaurant menu
Powered by GitBook
On this page
  • Setup a new project
  • Development
  • Usage
  • Publish
  1. Component

Custom Component

Custom component can be used by editors to create components with the appearance and functionality according to their needs, if the official Qore component has not been able to meet these needs.

With this custom component, it allows editors to add script code with output components that can be used in the app editor. You can follow these steps to create a custom component.

This provides a starter template for building custom qore app compoent using Rollup and TypeScript.

Setup a new project

To use this package, run the following command in your terminal:

npm init qore-app-component [component name]

This will create a new directory with the specified package name and install all necessary dependencies.

Development

Start edit your component in src/[componentName].tsx, all qore apps api are available via props with more api added viw import from @qorebase/app-component package. If you're using third party package, make sure the package supports schema script module, if not, that package will be bundled by rollup.

Usage

To build the package, run the following command:

npm run build

This will compile the TypeScript code and bundle the source and commonjs packages with Rollup.

Publish

To publish the package, run the following command to bump the version:

npm version [major|minor|patch|prerelease]

This will bump the version in package.json and package-lock.json and create a new commit and tag.

Then, run the following command to publish the package:

npm publish

PreviousFloating ButtonNextProps

Last updated 2 years ago