DappletContextPicker

DappletContextPicker is a component that enables context picking mode, provides latches for specific contexts, and onClick callback functions.

For examples and details on the usage of this React components, visit the feature demo page.

Basic usecase

You don’t need to import the component. It’s available in the NEAR Components through the Layout Managers.

<DappletContextPicker onClick={onClick} LatchComponent={LatchComponent} />

Props

Name	Type	Optional	Description
target	Target or Target[]	✔️	The set of target contexts that will be highlighted and available for selection. By default, all contexts on the page provided by the available adapters will be active for Picker.
onClick	(ctx: TransferableContext) => void	✔️	A callback that will be called when the context is clicked.
LatchComponent	React.FC<LatchProps>	✔️	Adding a Latch component. Contexts with Latch become interactive. onClick is called when the Latch is clicked.

Example Usage

Here’s an example showing how to integrate DappletContextPicker into your project:

import React from 'react';

const Example = () => {
  const handleClick = (ctx) => {
    console.log('Context selected:', ctx);
  };

  const LatchComponent = ({ ctx }) => (
    <button onClick={() => handleClick(ctx)}>Select Context</button>
  );

  return (
    <DappletContextPicker
      onClick={handleClick}
      LatchComponent={LatchComponent}
    />
  );
};

export default Example;

Advanced Configuration

Custom Target Configuration

Use the targetprop to define specific contexts or arrays of contexts for fine-tuned selection.

Example: target=Target1, Target2

Custom Latch Component

The LatchComponent prop allows you to fully control how contexts are displayed and interacted with.

Example: Use custom buttons, tooltips, or other UI elements as part of your latch.

DappletContextPicker is a versatile tool designed to simplify context selection and interaction in the Mutable Web environment. Start experimenting with different configurations to maximize its potential.