https://github.com/doasync/use-component
useComponent React hook
https://github.com/doasync/use-component
Last synced: 12 months ago
JSON representation
useComponent React hook
- Host: GitHub
- URL: https://github.com/doasync/use-component
- Owner: doasync
- License: mit
- Created: 2019-03-27T05:40:12.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2019-03-27T07:55:46.000Z (almost 7 years ago)
- Last Synced: 2025-03-18T15:46:38.618Z (12 months ago)
- Language: JavaScript
- Size: 4.88 KB
- Stars: 3
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# useComponent React hook
[![NPM Version][npm-image]][npm-url] ![NPM Downloads][downloads-image] [![GitHub issues][issues-image]][issues-url] [![Telegram][telegram-image]][telegram-url]
[npm-image]: https://img.shields.io/npm/v/use-component.svg
[npm-url]: https://www.npmjs.com/package/use-component
[downloads-image]: https://img.shields.io/npm/dw/use-component.svg
[issues-image]: https://img.shields.io/github/issues/doasync/use-component.svg
[issues-url]: https://github.com/doasync/use-component/issues
[telegram-image]: http://i.imgur.com/WANXk3d.png
[telegram-url]: https://t.me/doasync
Get the resulting component you want to wrap inside your target component by checking props, context or a fallback.
## Installation
```bash
npm install use-component
```
or
```bash
yarn add use-component
```
## Example
https://codesandbox.io/s/vm2zlr1qo3
## Usage
### `useComponent`
```js
import { useComponent } from 'use-component'
```
Pass an entry of current component to the hook (this means that you need wrap your current component in an object and pass it to the entry option) as well as component from prop, a fallback, or an object of components and you will get a resulting component:
```js
export const Input = ({
children,
component,
...fieldProps
}) => {
const Component = useComponent({
entry: { Input },
component,
fallback: 'input',
});
return (
{({ input, meta, ...customProps }) => {
return (
<>
{typeof Component === 'string' ? (
) : (
)}
>
);
}}
);
};
```
You can now pass any component as prop which will be used inside `Input` component. You can pass a styled component, for example, or any custom component, which will receive internal `input`, `meta`, `label` and `message` props.
```js
```
### `ComponentsContext`
You can also create a context provider:
```js
export const Form = ({
children,
onSubmit,
component,
components,
...otherProps
}) => {
const Component = useComponent({
entry: { Form },
component,
fallback: 'form',
components,
});
const { handleSubmit } = useContext(FormContext);
return (
{children}
);
};
```
And then just pass your components to it:
```js
Login
Email
Password
Login
```
You can still use your original `Input` and `ErrorMessage`, but they will use your specified components under the hood passing some internal props to them.
### Tip
If you found this hook useful, please star this package on [GitHub](https://github.com/doasync/use-component) ★
### Author
@doasync