react-usemap-render-component

react-usemap-render-component

Description

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.

(SSR compatible)

Installation

To install this package, run the following command in the terminal:

npm install react-usemap-render-component

or

yarn add react-usemap-render-component

Usage

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: "red" 
}

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: "red" 
  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>
};

Configuration

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 an id property, id will 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

Examples

// 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" } })

Props that are passed by default to the component

-"index" value of the array, can be received in the component to render

-"children" child of component