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

# ReverseSnippet

> Turns an attribute from a search result into a shortened snippet.

```ts Signature theme={"system"}
components.ReverseSnippet({
  attribute: string,
  hit: object,
  // Optional parameters
  highlightedTagName?: string,
  nonHighlightedTagName?: string,
  separator?: string,
  cssClasses?: object,
});
```

## About this widget

The `reverseSnippet` function returns any attribute from a hit into its snippeted form, when relevant.

This function leverages the [snippeting feature of Algolia](/doc/guides/building-search-ui/widgets/customize-an-existing-widget/js#highlight-and-snippet-your-search-results)
and is designed to work with the [`hits`](/doc/api-reference/widgets/hits/js)
or [`infiniteHits`](/doc/api-reference/widgets/infinite-hits/js) widget.

The `attribute` must be set in [`attributesToSnippet`](/doc/api-reference/api-parameters/attributesToSnippet),
either inside the Algolia dashboard or at runtime:

```js JavaScript icon=code theme={"system"}
search.addWidgets([
  configure({
    attributesToSnippet: ["description"],
  }),
]);
```

## Examples

```js JavaScript icon=code theme={"system"}
hits({
  container: "#hits",
  templates: {
    item(hit, { html, components }) {
      return html`
        <h2>${hit.name}</h2>
        <p>${components.ReverseSnippet({ attribute: "description", hit })}</p>
      `;
    },
  },
});
```

## Options

<ParamField body="attribute" type="string" required>
  The attribute of the record to snippet.
  You can give a dot-separated value for deeply nested objects, like `description.full`.

  ```js JavaScript icon=code theme={"system"}
  components.ReverseSnippet({
    // ...
    attribute: "description.full",
  });
  ```
</ParamField>

<ParamField body="hit" type="object" required>
  Original `hit` object provided to the function.
  The value is already bound to the function inside a string template, so you don't have to provide it.
  For this to work, the provided object must have a `_snippetResult[attribute].value` property.

  ```js JavaScript icon=code theme={"system"}
  components.ReverseSnippet({
    // ...
    hit: item,
  });
  ```
</ParamField>

<ParamField body="highlightedTagName" type="string" default="mark">
  The name of the HTML element to wrap the snippeted parts of the string.

  ```js JavaScript icon=code theme={"system"}
  components.ReverseSnippet({
    // ...
    highlightedTagName: "em",
  });
  ```
</ParamField>

<ParamField body="nonHighlightedTagName" type="string" default="span">
  The HTML element that wraps the non-highlighted parts of the string.

  ```js JavaScript icon=code theme={"system"}
  components.ReverseSnippet({
    // ...
    nonHighlightedTagName: "div",
  });
  ```
</ParamField>

<ParamField body="separator" type="string" default=", ">
  The character between each item when the attribute to highlight is an array.

  ```js JavaScript icon=code theme={"system"}
  components.ReverseSnippet({
    // ...
    separator: " - ",
  });
  ```
</ParamField>

<ParamField body="cssClasses" type="object" default="{}">
  The [CSS classes you can override](/doc/guides/building-search-ui/widgets/customize-an-existing-widget/js#style-your-widgets):

  * `root`. The component's root element.
  * `highlighted`. The highlighted parts.
  * `nonHighlighted`. The non-highlighted parts.
  * `separator`. The separator elements between highlighted parts.

  ```js JavaScript icon=code theme={"system"}
  components.ReverseSnippet({
    // ...
    cssClasses: {
      root: "MyCustomReverseSnippet",
      highlighted: [
        "MyCustomReverseSnippetPart",
        "MyCustomReverseSnippetPart--subclass",
      ],
    },
  });
  ```
</ParamField>

## HTML output

```html HTML icon=code-xml theme={"system"}
<span>This is the <mark class="ais-Snippet-highlighted">highlighted text</mark></span>
```