# prop-type-pick

> Simple way to help you extract the type of prop of react component

Latest version **1.0.1** (published 2021-08-18) · MIT license · 0 weekly downloads

## Install

```sh
npm install prop-type-pick
pnpm add prop-type-pick
yarn add prop-type-pick
bun add prop-type-pick
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.1 |
| Published | 2021-08-18 |
| First published | 2021-08-18 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 2 |
| Unpacked size | 12.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | kaka |
| Maintainers | skykaka |
| Keywords | react, props, type of props |

## Links

- npm: https://www.npmjs.com/package/prop-type-pick
- npm.io page: https://npm.io/package/prop-type-pick

## Dependencies (2)

- [react](https://npm.io/package/react.md) ^17.0.2
- [react-dom](https://npm.io/package/react-dom.md) ^17.0.2

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 1.0.1 (latest) — 2021-08-18
- 1.0.0 — 2021-08-18

## README

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


# Sample

```react
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'>


```

---
_Source: https://npm.io/package/prop-type-pick · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._