Add prop so that FAB can be open/closed externally

[ulsha]

Hello, I'm a fan of react-tiny-fab - I like the simplicity of the implementation and design. One thing I am missing, however, is a prop so that the component can be toggled/untoggled externally - for example, if a new process/job arrives the FAB should be toggled to display its progress. The user can then untoggle it automatically again.

It could be as simple as

 <Fab
        icon="+"
        event='click'
        toggled="true" /* or false */
>

[dericcain]

That is an interesting idea, but I am not sure how prevalent the use case is for that. What I mean is how many times would a user want to trigger a button from another action/element? This also causes the component to keep the state in sync by looking at the internal state as well as the toggled prop that is passed in. This is doable but it does add some complexity and I am not sure the added complexity outweighs the benefit.

[ulsha]

For example, I'm using it for a 'process queue' like the one you'd find when you upload something to Google Drive.

For example: https://i.stack.imgur.com/4DkBt.jpg

When one initiates a process you'd want the FAB to toggle automatically to display to the user that the process has started.

I know this might not be the exact intended usage, but your implementation was really the only solid implementation I could find that would allow to build such a component relatively quickly.

Other uses I can think of:

• Changing the icon depending on the state of the toggle (now it just rotates, but if you want to use something different than an -- for example up and down arrows -- X it doesn't align well)
• Chat toggling ala. what FB messenger has
• Toggling the FAB from other places than clicking the actual FAB (e.g. shortcuts for e-mail etc.)

[momocow]

Another use case for me, I set event to "click" and provide a custom onClick function to open a mask. After the mask is shown, I want the FAB to be opened; however there is no way to open it programmatically.

[jhofer]

Here is my workaround to override it from outside:

const isOpen = true;
return  <Fab
                   ....
                    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
                    // @ts-ignore
                    className={`rtf ${isOpen ? 'open' : 'closed'}`}
                >
    ```