> ## Documentation Index
> Fetch the complete documentation index at: https://dapplets.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# DappletContextPicker

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

<Tip>
  For examples and details on the usage of this React components, visit the [feature demo page](https://dapplets.mintlify.app/products/picker-tool).
</Tip>

## 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`](https://dapplets.mintlify.app/api-references/target) or [`Target[]`](https://dapplets.mintlify.app/api-references/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`](https://dapplets.mintlify.app/api-references/transferable-context)`) => void`                        | ✔️       | A callback that will be called when the context is clicked.                                                                                                                         |
| **`LatchComponent`** | `React.FC<`[`LatchProps`](https://dapplets.mintlify.app/api-references/latch-props)`>`                                               | ✔️       | 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:

```javascript theme={null}
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

<AccordionGroup>
  <Accordion title="Custom Target Configuration" defaultOpen={false}>
    Use the `target`prop to define specific contexts or arrays of contexts for fine-tuned selection.

    Example: `target=Target1, Target2`
  </Accordion>

  <Accordion title="Custom Latch Component" defaultOpen={false}>
    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.
  </Accordion>
</AccordionGroup>

<Tip>
  **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.
</Tip>