Source: layout/FrameDiv.js

import React, { useEffect, useState } from "react";
import { useDispatch, useSelector } from "react-redux";
import { appActions, processOptions } from "../..";
import { Template } from "../templates";

/**
 * Componente que renderiza un div que va a llenarse asincrónicamente de contenido.
 * Este componente se complementa con FrameSelect y FrameLink.
 * @name Reactor.Components.Layout.FrameDiv
 * @param {string!} id Identificador único del elemento div
 * @class
 * @example
<frame_div id="DivCharts" 
  options='{
    "className":"tabs tabs-pill", 
  }'
>
  <span>Contenido por defecto</span>
</frame_div>
 */

export const FrameDiv = ({id, children}) => {

  const data = useSelector(state => state.app.frameDivs[id]);
  const dispatch = useDispatch();

  useEffect(() => {
    return () => {
      dispatch(appActions.clearFrameDiv(id));
    }
  }, [id])

  return (
    <>
      {(data && data.content) ? <Template content={data.content} /> : children}
    </>
  )
}