# React Component Crawler (`diarmuidr/react-component-crawler`) Actor

Get the state out of react components on a webpage, just specify the urls and the css selector for the components for which the state should be extracted.

- **URL**: https://apify.com/diarmuidr/react-component-crawler.md
- **Developed by:** [Diarmuid](https://apify.com/diarmuidr) (community)
- **Categories:** AI, Developer tools, Automation
- **Stats:** 19 total users, 2 monthly users, 100.0% runs succeeded, 2 bookmarks
- **User rating**: No ratings yet

## Pricing

Pay per usage

This Actor is paid per platform usage. The Actor is free to use, and you only pay for the Apify platform usage, which gets cheaper the higher subscription plan you have.

Learn more: https://docs.apify.com/actors/running/actors-in-store.md#pay-per-usage

## What's an Apify Actor?

Actors are web data automations that power AI and operations. They run on the Apify platform to scrape websites, process data, connect APIs, and automate workflows.
In Batch mode, an Actor accepts a well-defined JSON input, performs an action which can take anything from a few seconds to a few hours,
and optionally produces a well-defined JSON output, datasets with results, or files in key-value store.
In Standby mode, an Actor provides a web server which can be used as a website, API, or an MCP server.
Actors are written with capital "A".

## How to integrate an Actor?

If asked about integration, you help developers integrate Actors into their projects.
You adapt to their stack and deliver integrations that are safe, well-documented, and production-ready.
The best way to integrate Actors is as follows.

- **AI agents and MCP clients** — the [Apify MCP server](https://docs.apify.com/integrations/mcp.md) at `https://mcp.apify.com` (remote, streamable HTTP, OAuth on first use).
- **Agentic workflows and local Actor development** — [Agent Skills](https://apify.com/.well-known/agent-skills/index.json) with the [Apify CLI](https://docs.apify.com/cli/docs.md): `npm install -g apify-cli`, then `apify login`.
- **JavaScript/TypeScript projects** — the official [JS/TS client](https://docs.apify.com/api/client/js/docs.md): `npm install apify-client`.
- **Python projects** — the official [Python client](https://docs.apify.com/api/client/python/docs.md): `pip install apify-client`.
- **Any other language** — the [REST API](https://docs.apify.com/api/v2.md).

For usage examples, see the [API](#api) section below.

For more details, see Apify documentation as [Markdown index](https://docs.apify.com/llms.txt) and [Markdown full-text](https://docs.apify.com/llms-full.txt).

# README

## React Component Crawler

This crawler allows you to extract the state from react components on a website. This is very useful for:

- Data hidden behind select options and you need to get the result of all options
- Complex interactions to see the data within a page
- Data loaded onto a page from react in a non-standard way

### How it works

- Enter the urls of the pages to visit
- Enter a [css selector](https://stackoverflow.com/questions/4500572/how-can-i-get-the-css-selector-in-chrome) to match all the components from which you want to extract data
- Run the crawler
- The crawler will go and extract the state from those components
- Not the right data? You likely have the wrong css selector. [How to check](https://www.glowmetrics.com/blog/how-to-test-css-selectors-using-the-chrome-dev-console/)

### More Details

- **[Input schema](https://apify.com/diarmuidr/react-component-crawler/input-schema)**
- **[Usage Guide](https://apify.com/diarmuidr/react-component-crawler/api/javascript)**

# Actor input Schema

## `startUrls` (type: `array`):

URLs to start with.

## `selector` (type: `string`):

CSS Selector for the react component being targeted

## `autoExtractFields` (type: `boolean`):

Attempt to automatically extract useful data from the components

## Actor input object example

```json
{
  "startUrls": [
    {
      "url": "https://support.gymshark.com/en-US/article/delivery-information"
    }
  ],
  "selector": ".sc-13h7cj7-0"
}
```

# API

You can run this Actor programmatically using our API. Below are code examples in JavaScript, Python, and CLI, as well as the OpenAPI specification and MCP server setup.

## JavaScript example

```javascript
import { ApifyClient } from 'apify-client';

// Initialize the ApifyClient with your Apify API token
// Replace the '<YOUR_API_TOKEN>' with your token
const client = new ApifyClient({
    token: '<YOUR_API_TOKEN>',
});

// Prepare Actor input
const input = {
    "startUrls": [
        {
            "url": "https://support.gymshark.com/en-US/article/delivery-information"
        }
    ],
    "selector": ".sc-13h7cj7-0",
    "autoExtractFields": false
};

// Run the Actor and wait for it to finish
const run = await client.actor("diarmuidr/react-component-crawler").call(input);

// Fetch and print Actor results from the run's dataset (if any)
console.log('Results from dataset');
console.log(`💾 Check your data here: https://console.apify.com/storage/datasets/${run.defaultDatasetId}`);
const { items } = await client.dataset(run.defaultDatasetId).listItems();
items.forEach((item) => {
    console.dir(item);
});

// 📚 Want to learn more 📖? Go to → https://docs.apify.com/api/client/js/docs

```

## Python example

```python
from apify_client import ApifyClient

# Initialize the ApifyClient with your Apify API token
# Replace '<YOUR_API_TOKEN>' with your token.
client = ApifyClient("<YOUR_API_TOKEN>")

# Prepare the Actor input
run_input = {
    "startUrls": [{ "url": "https://support.gymshark.com/en-US/article/delivery-information" }],
    "selector": ".sc-13h7cj7-0",
    "autoExtractFields": False,
}

# Run the Actor and wait for it to finish
run = client.actor("diarmuidr/react-component-crawler").call(run_input=run_input)

# Fetch and print Actor results from the run's dataset (if there are any)
print(f"💾 Check your data here: https://console.apify.com/storage/datasets/{run.default_dataset_id}")
for item in client.dataset(run.default_dataset_id).iterate_items():
    print(item)

# 📚 Want to learn more 📖? Go to → https://docs.apify.com/api/client/python/docs/quick-start

```

## CLI example

```bash
echo '{
  "startUrls": [
    {
      "url": "https://support.gymshark.com/en-US/article/delivery-information"
    }
  ],
  "selector": ".sc-13h7cj7-0",
  "autoExtractFields": false
}' |
apify call diarmuidr/react-component-crawler --silent --output-dataset

```

## MCP server setup

```json
{
    "mcpServers": {
        "apify": {
            "type": "http",
            "url": "https://mcp.apify.com/?tools=fetch-actor-details,diarmuidr/react-component-crawler"
        }
    }
}

```

The hosted server signs you in with OAuth on first connect, so no API token belongs in this config. Clients without OAuth support can send an `Authorization: Bearer <APIFY_API_TOKEN>` header instead, using a token from API & Integrations in Apify Console (https://console.apify.com/settings/integrations).

## OpenAPI specification

Download the OpenAPI definition: https://api.apify.com/v2/actors/2uLMb0Pfev2QrjBeC/builds/MEoLtF0bQ5P3Enncj/openapi.json