useBeagle

Hook for accessing the Beagle inspector controls

The useBeagle hook provides a simple interface to control the Beagle inspector from your components.

Return Value

The hook returns an object with the following property:

showInspector · () => void

Opens the Beagle inspector modal, displaying all captured logs.

Usage

The primary use case is to provide a button or UI element that opens the inspector:

import { useBeagle } from 'react-native-beagle';
import { View, Button } from 'react-native';

function DebugPanel() {
  const { showInspector } = useBeagle();

  return (
    <View>
      <Button
        title="Open Inspector"
        onPress={showInspector}
      />
    </View>
  );
}

Floating Debug Button

Create a floating button to easily access the inspector during development:

import { useBeagle } from 'react-native-beagle';
import { TouchableOpacity, Text } from 'react-native';

function FloatingDebugButton() {
  const { showInspector } = useBeagle();

  return (
    <TouchableOpacity
      onPress={showInspector}
      style={{
        position: 'absolute',
        bottom: 20,
        right: 20,
        backgroundColor: '#FF6B35',
        padding: 15,
        borderRadius: 30,
      }}
    >
      <Text style={{ color: 'white', fontWeight: 'bold' }}>
        Beagle
      </Text>
    </TouchableOpacity>
  );
}

Conditional Rendering

Only show the inspector button in development:

import { useBeagle } from 'react-native-beagle';
import { Button } from 'react-native';

function DevToolsButton() {
  const { showInspector } = useBeagle();

  if (!__DEV__) {
    return null;
  }

  return (
    <Button 
      title="Debug" 
      onPress={showInspector} 
    />
  );
}

Type Definition

function useBeagle(): {
  showInspector: () => void;
}