# 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>
}
```