@onaio/element-map
    TypeScript icon, indicating that this package has built-in type declarations

    0.0.5 • Public • Published

    ElementMap

    A simple React component that takes a list of elements and a HTML tag and outputs the same list of elements wrapped in the same HTML tag provided.

    Why is this useful?

    ElementMap helps to keep code DRY - use it every time that have a list of things that you want to render wrapped inside a HTML tag, which happens a lot of times in any medium/large codebase.

    Therefore this (or variations of it):

    const items = ['a', 'b', 'c'];
    const wrappedItems = items.map(el => <li>el</li>);
    return <ol>{wrappedItems}</ol>;

    Becomes:

    import ElementMap from '@onaio/element-map';
    
    const things = ['a', 'b', 'c'];
    return (
      <ol>
        <ElementMap items={things} HTMLTag="li" />
      </ol>
    );

    Examples

    import ElementMap from '@onaio/element-map';
    
    const headerItems = ['Name', 'Age'];
    let output = <ElementMap items={headerItems} HTMLTag="th" />;
    // output should now look like:
    // [<th>Name</th>, <th>Age</th>]
    import ElementMap from '@onaio/element-map';
    
    const headerItems = ['Fruit', 'Price'];
    let output = <ElementMap items={headerItems} HTMLTag="th" className="css-class" />;
    // output should now look like:
    // [<th className="css-class">Fruit</th>, <th className="css-class">Price</th>]

    Keywords

    Install

    npm i @onaio/element-map

    DownloadsWeekly Downloads

    11

    Version

    0.0.5

    License

    Apache-2.0

    Unpacked Size

    16.5 kB

    Total Files

    6

    Last publish

    Collaborators

    • onaio