layout customization hooks

Layout.tsx

import React, {createContext, useContext, useReducer, useEffect} from 'react'
// presentation
import Layout from './Layout'


const LayoutContext = createContext();

/**
 * limits possible customizations 
 */
const layoutCustomizationReducer = (layoutState, action) => {
    if (action.type === 'FAQ') {
        return {
            ...state, 
            faq: payload
        }
    }
}

const useFaqLayoutCustomization = (faqData) => {
   const [,dispatch] = useContext();
   useEffect(() => { dispatch({type: 'FAQ', payload: faqProps })
}

const LayoutProvider = () => {
   const useContext(LayoutContext);
   const [state, dispatch] = useReducer(layoutCustomizationReducer);
   <Provider value={/*...state (if needed),*/ dispatch}>
     {/* state has "faq" prop */}
     <Layout {...state}>
       {children}
     </Layout>
   <Provider
}
             
// product engineer (building screens) toolkit
// probably should not affect much of layout, look-feel, perhaps just any data 
// i.e. "what do the faq say?" rather than "how do the faq look?"
export {useFaqLayoutCustomization, /* use*LayoutCustomization */}
             
// boilerplate for app
export default LayoutProvider;