Skip to main content
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

NameTypeOptionalDescription
targetTarget 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.
LatchComponentReact.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

Use the targetprop to define specific contexts or arrays of contexts for fine-tuned selection.Example: target=Target1, Target2
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.