prop-type-pick
v1.0.1
Published
Simple way to help you extract the type of prop of react component
Downloads
3
Readme
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'>