Skip to main content

​
Overview

The getOptions() function returns the current React Scan configuration options as a reactive signal.

​
Signature

getOptions(): Signal<Options>

​
Parameters

This function takes no parameters.

​
Returns

​
signal
Signal<Options>
A Preact signal containing the current options object. Access the value using .value.

​
Usage

​
Get Current Options

import { getOptions } from 'react-scan';

const options = getOptions();
console.log(options.value);
// {
//   enabled: true,
//   showToolbar: true,
//   log: false,
//   animationSpeed: 'fast',
//   ...
// }

​
Check Specific Option

import { getOptions } from 'react-scan';

const options = getOptions();
if (options.value.enabled) {
  console.log('React Scan is enabled');
}

​
React to Changes

import { getOptions } from 'react-scan';
import { effect } from '@preact/signals';

const options = getOptions();

// React to option changes
effect(() => {
  console.log('Options changed:', options.value);
});

​
Use in React Component

import { getOptions } from 'react-scan';
import { useSignal } from '@preact/signals-react';

function ToolbarToggle() {
  const options = getOptions();
  
  return (
    <button onClick={() => {
      setOptions({ showToolbar: !options.value.showToolbar })
    }}>
      {options.value.showToolbar ? 'Hide' : 'Show'} Toolbar
    </button>
  );
}

​
Conditional Logic Based on Options

import { getOptions } from 'react-scan';

function setupMonitoring() {
  const options = getOptions();
  
  if (options.value.log) {
    // Set up console logging
  }
  
  if (options.value.trackUnnecessaryRenders) {
    // Set up unnecessary render tracking
  }
}

​
Signal API

The returned value is a Preact signal, which provides reactive updates:
  • Read value: Use .value to access the current options
  • Subscribe to changes: Signals automatically track dependencies in effect() or React components using @preact/signals-react
  • Type-safe: The signal is typed as Signal<Options> for full TypeScript support
import { getOptions } from 'react-scan';
import { effect } from '@preact/signals';

const options = getOptions();

// Automatically runs when options change
effect(() => {
  if (options.value.enabled) {
    console.log('Scanning is active');
  }
});

​
Default Values

When React Scan initializes, the following default values are used: 
{
  enabled: true,
  log: false,
  showToolbar: true,
  animationSpeed: 'fast',
  dangerouslyForceRunInProduction: false,
  showFPS: true,
  showNotificationCount: true,
  allowInIframe: false,
}

​
See Also

Build docs developers (and LLMs) love

Get started for freeTalk to us