Start typing to search...
Developer DocsAPI Reference
Back to withkoji.com

Capture user input

Koji provides a set of predefined user-input controls that you can use in your app’s frontend to capture information and content from your users.

For example, your app might allow users to submit photos for a contest or to contribute videos for a virtual choir performance.

These controls are found in Koji.ui.capture in the @withkoji/core package.

Using user-input controls

To use a predefined user-input control in your app,

  • Install @withkoji/core in the frontend terminal tab.

    Learn how…​

    1. At the bottom of the code editor, click the frontend tab of the terminal pane.

    2. Press Ctrl+C or Cmd+C to cancel the running service.

    3. Install @withkoji/core.

      npm install @withkoji/core

    4. Restart the service.

      npm start

  • Import @withkoji/core in your front-end code.

    import Koji from '@withkoji/core';

  • Call the appropriate Koji.ui.capture control.

    myVariable = await Koji.ui.capture.<control-name>( <control-parameters> )

    • .audio – Prompts the user to select or upload an audio file. method reference

    • .color – Prompts the user to select or specify a color. method reference

      If allowAlpha : true is included in the options, the Opacity slider is visible in the color selector modal.

    • .custom – Prompts the user to interact with a custom control. method reference
      Learn more: build-custom-controls.html

    • .file – Prompts the user to upload a file of any type. method reference

    • .image – Prompts the user to select or upload an image file. method reference

    • .link – Prompts the user to enter an external URL. method reference

    • .media – Prompts the user to select, specify, or upload an image, a file, an audio, or a video. method reference

    • .range – Prompts the user to select a value from a numeric range. method reference

    • .select – Prompts the user to select from a predefined list of options. method reference

      If the list has 1 to 4 options, the options are presented as radio buttons.
      If the list has 5 or more options, the list is presented as a dropdown.

    • .video – Prompts the user to select or upload a video file. method reference

Example

The Capturing User Input app illustrates how to capture user input with the UI / Capture controls. Click each button to preview the popup presented to the user by each control.

In this example,

  • Each control is triggered by a clicking a button.

    <button onClick={captureImage}>{'.image test'}</button>

  • The button’s onClick handler calls the control and uses the returned value, if any.

    const captureImage = async () => {
  const capturedImage = await Koji.ui.capture.image({ bgColor : '#ff5555' });
  if (capturedImage) setMainIcon(() => capturedImage);
};

To view the complete code of the example app, fork the Capturing User Input project from the Koji App Store.

Related resources