Simple reusability is hard, how can I do it?

[azamuddin]

Coming from React or programming in general, I used to the idea of reusability by configuring the input (props in Component or parameter in function)

I know, that we can use the same machine with different implementation (same machine, different actions implementation or services, guards).

But consider this machine that will accept event "ESCAPE_BUTTON_PRESSED".

state: idle

on: {
    "ESCAPE_BUTTON_PRESSED": {
          target: "hiding"
    }
}

state: hiding

{
    entry: ['hideWindow', 'hideApp', 'unregisterShortcuts']
}

FSM

idle -> ESCAPE_BUTTON_PRESSED -> hiding

I want to make the machine to be reusable "Window Machine". I want the "user" of the machine will be able to customize WHICH STATE the machine should transition when escape button pressed.

Let's say I will create two actor that use the windowMachine, that is MainWindowActor and TimerWindowActor.

For MainWindowActor, I want it to be:

idle -> ESCAPE_BUTTON_PRESSED -> hiding 

For TimerWindowActor, I want it to be:

idle -> ESCAPE_BUTTON_PRESSED -> recreating (instead of transition to `hiding`)

Based on my understanding:

• I can't use actions here, because it is about transition, and actions are fire and forget and can't alter state machine.
• This machine should be a generic enough to be reusable, but since state transition is hard coded and not configurable for different implementation, that means I can't make this machine to be reusable.

I do not want to create different machine, because their events are mostly the same so actually can be reused with different logic.

Is it possible to achieve what I want? Create reusable machine that can have different transition logic when an event received.

Or it is anti pattern?