React — Reactotron Custom Command with parameters

Reactotron is one of best debugger for react / react native. State monitoring, API log for react native (without image / file calls), custom command for customising testing purpose. All of them helped me a lot during my development even Flipper is release. Thank you for Reactotron team.

infinitered/reactotron

Custom Command is a feature in Reactotron application that we could do anything with code, for example, I could make a custom command to console.log a message.

Reactotron.onCustomCommand("test", () => console.log("This is an example"))

It give us a way to quick test on some functions without going to specific page. However, Reactotron readme haven’t share much information about arguments.

In this story, I will share a way to support arguments for better experience.

import { ArgType } from "reactotron-core-client";
Reactotron.onCustomCommand({
    command: "Custom Console Log",
    handler: (params) => Reactotron.log(`Log Message: ${params.message}`),
    args: [
        {
            name: "message",
            type: ArgType.String,
        }
    ]
})

Custom command support multiple arguments. However, it only support String. And the filled variables will be reset to empty after application reload but it is still very useful if apply a command that fit for your application.

To understand more fields about custom command, you could check reactotron-core-client repo.

infinitered/reactotron-core-client

The repo below is a demo for Reactotron custom command.

springwong/ReactotronSample