Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/ailtonvivaz/react-native-beagle/llms.txt

Use this file to discover all available pages before exploring further.

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;
}

Build docs developers (and LLMs) love

Get started for freeTalk to us