Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/tetracalibers/polym-react-props
https://github.com/tetracalibers/polym-react-props
Last synced: 11 days ago
JSON representation
- Host: GitHub
- URL: https://github.com/tetracalibers/polym-react-props
- Owner: tetracalibers
- Created: 2022-09-22T01:20:37.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2022-09-27T08:04:17.000Z (over 2 years ago)
- Last Synced: 2024-11-07T21:20:10.761Z (2 months ago)
- Language: TypeScript
- Size: 73.2 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# @polym/react-props
## install
```
npm install --save-dev @polym/react-props
```or
```
yarn add -D @polym/react-props
```## Usage
### props definition tool
```ts
import {
getDefaultProps,
getPropType,
NotRequired,
Required
} from '@polym/react-props'const appearFromOptions = ['bottom', 'right'] as const
type AppearFromOptions = typeof appearFromOptions[number]/* config object */
const conf = {
/* Required() */
startHeight: Required(),
/* NotRequired(DEFAULT_VALUE) */
appearFrom: NotRequired('bottom')
}/* Get the type of all props */
type PropType = getPropType/* Get default value object for all props */
const defaultProps = getDefaultProps(conf)
```Centralize the props information (type, default value, and whether it is required or not) in a configuration object.
Through `getPropType` and `getDefaultProps`, type and default value objects can be obtained.
Make them variable and you can use them anywhere!```ts
/* Example: Expand to function component arguments */const MyComponent = ({ ...props }: PropType = { ...defaultProps }) => {
returnHello World
}
``````ts
/* Example: Use within a story definition in a storybook */const Template: ComponentStory = ({ ...args }) => (
)export const sample01 = Template.bind({})
sample01.args = {
...defaultProps // Expand default value object as is
}
```#### SORRY
At present, if you define props with types other than `T extends string | number | boolean | bigint | null | undefined`, you need to describe them separately.
```ts
import {
getDefaultProps,
getPropType,
NotRequired,
Required
} from '@polym/react-props'const conf = {
width: NotRequired(150),
disabled: Required(),
value: Required()
}type PropType = getPropType & {
onChange?: (value: string) => void
}const defaultProps = {
...getDefaultProps(conf),
onChange: (value: string) => console.log(value)
}
```### Component type with `as` props
`as` props is one of the methods to increase the versatility of components.
If an HTML tag name is specified, the component will be rendered as the specified HTML element.
If a React component (or StyledComponent) is specified, the functionality and style of the specified component can be added.
#### `PolymorphicComponentProp` or `PolymorphicComponentPropWithRef`
Using these types in the type definition of props allows for type-safe implementation of components with `as` props.
Specifically, it is possible to implement components that change the type of props and `ref` that can be specified for the component, depending on `as` props.
```ts
import { ElementType, forwardRef, ReactElement } from 'react'
import {
PolymorphicComponentPropWithRef,
PolymorphicRef
} from '@polym/react-props'type MyComponentProps = PolymorphicComponentPropWithRef<
As,
OtherProps
>type MyComponentType = (
props: MyComponentProps
) => ReactElement | nullconst MyComponentInner = (
{ as, children, ...props }: MyComponentProps,
ref: PolymorphicRef
) => {
const ActualComponent = as || 'div'return (
{children}
)
}export const MyComponent: MyComponentType = forwardRef(MyComponentInner)
```##### WARNING
You cannot control the HTML tag names that can be specified for `as` props.
For example, if you specify 'img' for `as` in a component with child elements, it will crash at runtime.
`as` props should be implemented with caution.
### Utility for style control props
```ts
import { CSSt, NotRequired } from '@polym/react-props'const conf = {
borderWidthValue: NotRequired(1),
borderWidthUnit: NotRequired('px')
}
```## Developer
**tomixy** is a female engineer living in Japan.
- [Biography Site](https://tetracalibers.notion.site/tomixy-TetraCalibers-30b94fb9fc054d4da667539ef35f42c6)
- [Twitter](https://twitter.com/tetracalibers)