prop-type-pick

This is a simple tool to help you extract the type of prop of react component in a simple way.

Sample

import React from "react";
import { useCallback } from "react";
import { Pa, Pla, useLa } from ".";

// single prop
// "pa" means "prop at"
type InputValueType = Pa<'input', 'value'>
const inputValue: Pa<'input', 'value'> = "abc";

const divClick: Pa<'div', 'onClick'> = e => {
    console.info(e.currentTarget.textContent);
}


function useCallbackExample() {
    const callback1 = useCallback<Pa<'div', 'onClick'>>(e => {
        console.info(e.currentTarget.textContent);
    }, [])

    // useLa is easier
    // "useLa" means use listener at
    const callback2 = useLa<'div', 'onClick'>(e => {
        console.info(e.currentTarget.textContent);
    }, [])
}


// many props
// "Pla"` means "Prop List At"
const propsMap1 : Pla<'input', 'value' | 'onChange'> = {
    value: '123',
    onChange: e => console.info(e.currentTarget.value)
}

// the "value" prop is not required just like it in the "input" component
const propsMap2 : Pla<'input', 'onChange', 'value'> = {
    onChange: e => console.info(e.currentTarget.value)
}

// no required prop
const propsMap3 : Pla<'input', never, 'onChange'> = {
    onChange: e => console.info(e.currentTarget.value)
}

// Props of ClassComponent

class TestClassComp extends React.Component<{
    value: number,
    onChange: (value: number) => void
}>{

}
type ValueTypeOfClassComp = Pa<TestClassComp, 'value'>;

// Props of FunctionComponent
function TestFunComp(props: {
    value: number,
    onChange: (value: number) => void
}) {
    return <div></div>
}

// Because the Function is not a type, so we need to use typeof operator to get the type of the Function
type ValueTypeOfFunComp = Pa<typeof TestFunComp, 'value'>