TypeScript: How to make a function behave reactively

Question

I have a function written in TypeScript to show a color picker control, which will return a button property. That button property will then be passed down to an external component where they handle the actual rendering logic.

My function is something like below in the ts file:

const getColorPickerControl = (): ButtonProps => {
    ....
    return createButton(
        id: 'colorPicker',
        label: 'color picker',
        onColorCellSelected: (colorItem: colorParam) => {
             .....
             // here I want to update the icon color below based on the selected color, 
             // so I want this function return a new ButtonProps with the updated icon color
        },
        iconColor: 'red'   // I can only hard-code this color for now
    );
}

Basically, onColorCellSelected is the click event handler when a color cell is selected in the color picker, so I want to change the icon color dynamically, based on the current selected color.

I know that I can make this component reactive/observable by converting it to a tsx file where we can handle the rendering logic on my own and use state/store, but given that the rendering logic is done by a third party, I am wondering if there is a way to just have the function re-do its job when a new color is selected?

user_13243520 · Answer

This should get you headed in the right direction -- using mapped generics with React TSX definitions for various HTMLElements. Here is the Button being "unwrapped" -- all props become conditional and all are accessible

export type UnwrapButtonProps<
  T extends keyof ButtonHTMLAttributes
> = {
  [P in T]?: ButtonHTMLAttributes[P];
};


export const getColorPickerControl = ({
  color,
  style,
  onChange,
  ...props
}: UnwrapButtonProps<
  'color' | 'onSelect' | 'onSelectCapture' | 'onChange' | 'style'
>) => {

};

This logic is applicable to any Type that has children props (SVG, Anchor, Input, etc etc etc)

If it's icon color you're after, assuming they're svgs, then this will also be a useful helper function:

export type SVGAttribs> = {
  [P in T]?: SVGAttributes[P];
};

Here's an example of the SVGAttribs type in action for an "X" icon for users to close given views

import { SVGAttribs } from '@/types/index';

const X = ({
  ...props
}: SVGAttribs<
  'className' | 'width' | 'height' | 'onMouseOver' | 'aria-hidden'
>) => {
  return (
    
  );
};

export default X;

Note how by only using ...props as the returned value all properties defined within the <"" | ""> of SVGAttribs are now conditionally available for consumption with this Component, anywhere in the project

Here is an example of the X component having those props called inline

                
                  {/* Mobile menu button */}
                  
                    Open menu
                    {open ? (
                       {
                        // additional logic for onMouseOverEvent, etc.
                      }}  aria-hidden='true' />
                    ) : (
                      
                    )}

as for conditionally changing color, you'll need to do that by mapping elements that the user will toggle to change to a given color. Something like this

          {page?.afcSocial?.afcTemplate?.map((heroImg, i) => (
            
              
                
                  
                    
                  

                  
                    
                      
                        {flow[i].icon} 
                        
                          {' '}
                          
                        
                           
                        
                          {heroImg?.cta?.caption}
                        
                      
                      
                        {heroImg?.cta?.description}
                      
                    
                  
                
              
            
          ))}

Note: The cn value is classnames, imported from the classnames package

TypeScript: How to make a function behave reactively

1 Answers