How can we help you?

With Stark's source code integration, you get a CLI tool to scan your React codebase, automatic syncing to your Stark dashboard, and integration with your existing ESLint setup for IDE support.

Getting Started

Begin by installing the package:

npm install --save-dev @stark-lab-inc/stark-accessibility-react

Using CLI Tool (Recommended)

The easiest way to get started is with our CLI tool that scans your React code for accessibility issues and automatically uploads results to your Stark dashboard. A Stark token is required for all scans.

1. Log in to your Stark account at app.getstark.co
2. Navigate to your project settings
3. Find your project's Stark Token (it looks like stark_1452216e48434f07bd0cf4f6f6502e56)
4. Copy this token - you'll need it for running the tool
5. Configure your token (see configuration options below)
6. Run accessibility checks

Your Stark token can be configured using any of these methods:

Option 1: Environment Variable (Recommended for CI/CD)

export STARK_TOKEN="your-stark-token"
npx stark-scan-react src/

Option 2: .env File (Recommended for Development)

# Create .env file in your project root
echo "STARK_TOKEN=your-stark-token" > .env
npx stark-scan-react src/

Option 3: Command Line Argument

npx stark-scan-react src/ --stark-token your-stark-token

The CLI will automatically detect and use your token from any of these sources.

Once your token is configured, you can use these commands:

# Basic usage
npx stark-scan-react src/

# With custom scan name
npx stark-scan-react src/ --name "Production Build"

# Silent mode (perfect for CI/CD)
npx stark-scan-react src/ --silent

# Merge with local ESLint configuration
npx stark-scan-react src/ --merge-config

# Help
npx stark-scan-react --help

• --stark-token <token> - Your Stark token (REQUIRED - can also be set via environment variable or .env file)
• --name <name> - Custom scan name (defaults to current directory name)
• --silent - Suppress console output except errors
• --merge-config - Enable config merging (search for and merge with local ESLint configurations)
• --help - Show help message

By default, the CLI ships with an embedded configuration that works out of the box. However, you can use the --merge-config flag to integrate your existing ESLint configuration:

• Without --merge-config: Uses the embedded configuration
• With --merge-config: Searches for and merges local ESLint configs (eslint.config.js) with the embedded configuration

This is useful for projects that have specific requirements or custom ESLint configuration options (like specialized parser settings, environment configurations, or particular project needs).

If you prefer to integrate accessibility checking directly into your existing ESLint setup (for IDE support, custom workflows, etc.), you can use our ESLint plugin:

Add Stark to your existing ESLint configuration:

// eslint.config.js
import starkAccessibilityReact from '@stark-lab-inc/stark-accessibility-react';

export default [
  starkAccessibilityReact.configs.recommended,
  {
    files: ['**/*.{js,jsx}'],
  },
];

For TypeScript projects:

// eslint.config.js
import tseslint from 'typescript-eslint';
import starkAccessibilityReact from '@stark-lab-inc/stark-accessibility-react';

export default tseslint.config([
  {
    files: ['**/*.{ts,tsx}'],
    extends: [
      starkAccessibilityReact.configs.recommended
    ],
  },
]);