An npm package for rendering ReactJS components in a cleaner and more beautiful way, allowing elements to be passed to the components from the hook’s props.
To install this package, run the following command in the terminal:
npm install react-usemap-render-componentor
yarn add react-usemap-render-componenthttps://t.me/ricardo8Abreu_code_lab_community
To use this package in your project, you must first import it:
Then, you can use the useMap hook to render your ReactJS components. Here is an example of how to use the hook:
import React from 'react';
import useMap from 'react-usemap-render-component';
// Data
interface Data {
id: number
name: string
}
interface MyComponentProps extends Data {
color: string
}
const data: Data[] = [
{ id: 1, name: 'Item 1' },
{ id: 2, name: 'Item 2' }
]
// Component to render, easily receives props
const MyComponent = ({ id, name, color }:MyComponentProps) => {
return (
<div style={{ color }}>{name}</div>
)
}
const MyApp = () => {
const itemsComponent = useMap({ data, Component: MyComponent, color: 'red' })
// Rendering
return <div>{itemsComponent}</div>
};Now, here is an example of how to use the useMap hook with an array that is not of objects:
// Data
type Data = string
interface MyComponentProps {
color: string
children: string
}
const data: Data[] = ['Item 1', 'Item 2']
// To get the string Item is through "children"
const MyComponent = ({ children, color }:MyComponentProps) => {
return (
<div style={{ color }}>{children}</div>
)
}
const MyApp = () => {
const itemsComponent = useMap({ data, Component: MyComponent, color: 'red' })
// Rendering
return <div>{itemsComponent}</div>
};config: Optional object that can contain the following values:
*key: Allows changing the prop key of the component to render. The values can be:
by default it has "default"
-
"default": If the data is an object and has anidproperty,idwill be used otherwise it takes the index as key. -
"item": If the data is not an object, like array of strings, you can use the string element itself as a key. -
"object fields": example "id" | "name" | "slug" -
"index": index of the array
// When the data is an object **************************
interface Data {
id: number,
name: string
}
const data: Data[] = [
{ id: 1, name: 'Item 1' },
{ id: 2, name: 'Item 2' }
]
// Here, if the data is an object and has an `id` property, `id` will be used as a key.
// If you specify another value in `key` that exists in the object, that value will be used as a key.
const items = useMap({ data, Component: MyComponent, color: 'red', config: { key: "id" } })
// When the data is not an object ***********************************
type Data = string
const data: Data[] = ['Item 1', 'Item 2']
// Here, if the data is not an object, you can use the element itself as a key by specifying `"item"` in `key`.
// If you do not specify `key` or use `"default"`, the index of the element in the array will be used as a key.
const items = useMap({ data, Component: MyComponent, color: 'red', config: { key: "item" } })-"index" value of the array, can be received in the component to render
-"children" child of component