martin/databag
1
0
Fork 0
mirror of https://github.com/balzack/databag.git synced 2025-02-14 12:39:17 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

adding context to switch display modes based on viewport

Browse Source
This commit is contained in:
Roland Osborne 2022-08-01 22:35:36 -07:00
parent c6d551b172
commit 6c61854593
3 changed files with 58 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
net/web/src/App.js
View File

@ -8,6 +8,7 @@ import { CardContextProvider } from 'context/CardContext';
import { ChannelContextProvider } from 'context/ChannelContext';
import { StoreContextProvider } from 'context/StoreContext';
import { UploadContextProvider } from 'context/UploadContext';
import { ViewportContextProvider } from 'context/ViewportContext';
import 'antd/dist/antd.min.css';
function App() {
@ -21,13 +22,15 @@ function App() {
<ProfileContextProvider>
<AccountContextProvider>
<StoreContextProvider>
<AppContextProvider>
<div style={{ position: 'absolute', width: '100vw', height: '100vh', backgroundColor: '#8fbea7' }}>
<img src={login} alt="" style={{ position: 'absolute', width: '33%', bottom: 0, right: 0 }}/>
</div>
<div style={{ position: 'absolute', width: '100vw', height: '100vh' }}>
</div>
</AppContextProvider>
<ViewportContextProvider>
<AppContextProvider>
<div style={{ position: 'absolute', width: '100vw', height: '100vh', backgroundColor: '#8fbea7' }}>
<img src={login} alt="" style={{ position: 'absolute', width: '33%', bottom: 0, right: 0 }}/>
</div>
<div style={{ position: 'absolute', width: '100vw', height: '100vh' }}>
</div>
</AppContextProvider>
</ViewportContextProvider>
</StoreContextProvider>
</AccountContextProvider>
</ProfileContextProvider>

14
net/web/src/context/ViewportContext.js Normal file
View File

@ -0,0 +1,14 @@
import { createContext } from 'react';
import { useViewportContext } from './useViewportContext.hook';
export const ViewportContext = createContext({});
export function ViewportContextProvider({ children }) {
const { state, actions } = useViewportContext();
return (
<ViewportContext.Provider value={{ state, actions }}>
{children}
</ViewportContext.Provider>
);
}

34
net/web/src/context/useViewportContext.hook.js Normal file
View File

@ -0,0 +1,34 @@
import { useEffect, useState } from 'react';
export function useViewportContext() {
const [state, setState] = useState({ });
const updateState = (value) => {
setState((s) => ({ ...s, ...value }));
};
const handleResize = () => {
console.log(window.innerWidth);
console.log(window.innerHeight);
if (window.innerWidth < 600) {
updateState({ display: 'small' });
}
else if (window.innerWidth < 1600) {
updateState({ display: 'medium' });
}
else {
updateState({ display: 'large' });
}
};
useEffect(() => {
handleResize();
window.addEventListener('resize', handleResize)
return () => window.removeEventListener('resize', handleResize)
}, []);
return state
}