# Actions

Custom actions are simply a custom JS functions that can be assigned by editors to button clicks.

## Example action

Let's add a very simple action that displays `alert`. Registering actions is very similar to registering components. They also have `id`, `label` and `schema:`

```typescript
export const shopstoryConfig: Config = {
  // ...
  actions: [
    {
      id: "AlertAction",
      label: "Alert action",
      schema: [
        {
          prop: "text",
          label: "Text",
          type: "string",
          defaultValue: "Hello"
        }
      ]
    }
  ],
}
```

The real action code should be added to `ShopstoryProvider`:

```typescript
import { ShopstoryProvider } from "@shopstory/core/react";
import { CustomComponent } from "../components/CustomComponent/CustomComponent";

const AlertAction = (props: { text: string }) => {
  alert("Alert message: " + props.text);
}

export const DemoShopstoryProvider : React.FC = ({ children }) => {
  return <ShopstoryProvider
    actions={{
      AlertAction
    }}
  >
    { children }
  </ShopstoryProvider>
}
```

The values defined in the Shopstory sidebar will be passed as props to the `AlertAction` function.

The result:

{% embed url="<https://player.vimeo.com/video/779585852?h=bfd90a4df8>" %}

## Running React hooks inside of actions

Sometimes you might have a need to access a React hook (<https://reactjs.org/docs/hooks-intro.html>) from a custom action. It's not safe to run React hook directly inside of the action code as it's not a React component. But don't worry, the hook can be safely called in the custom Shopstory Provider component and its content can be accessed from the action code, something like this:

```typescript
export const DemoShopstoryProvider : React.FC = ({ children }) => {
  const myContext = useContext(MyContext) // Running a React hook

  return <ShopstoryProvider
    actions={{
      CustomAction: () => {
        // accessing hook data in the action code
        alert("Value from useContext hook: " + myContext.valueFromContext);
      }
    }}
  >
    { children }
  </ShopstoryProvider>
}
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.shopstory.app/custom-code/actions.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.