Views configuration has to be an array with pre-defined views which are compatible with ViewConfigType
. Example:
const viewsConfig = [
{
name: 'homepage',
path: '/',
component: HomePage,
default: true,
},
{
name: 'settings',
path: '/settings',
component: SettingsPage,
},
];
Wrap your components with <Views>
, pass to it your views configuration and place <DefaultView>
somewhere as a placeholder to display your views. Example:
import Views, { DefaultView } from 'react-delta-views';
const App = () => (
<Views config={viewsConfig}>
<Header />
<DefaultView />
<Footer />
</Views>
);
If you want to change current view, call openView
function with view name as first parameter. Example:
import { openView } from 'react-delta-views';
const Button = () => (
<button onClick={() => openView('settings')}>
Open settings
</button>;
)
If you want close view, just call closeView
function.
import { closeView } from 'react-delta-views';
const Button = () => (
<button onClick={() => closeView('settings')}>
Close settings
</button>;
)
import React, { useEffect, useState } from 'react';
import { createPortal } from 'react-dom';
import { useViews, getCurrentView, closeView } from 'react-delta-views';
const modalNode = document.getElementById('modal');
const ModalView = () => {
const [currentView, setCurrentView] = useState(null);
const { viewsState } = useViews();
useEffect(() => {
setCurrentView(getCurrentView('modal'));
}, [viewsState]);
if (!currentView) {
return null;
}
const closeModal = () => {
closeView(currentView.name);
};
return createPortal(
<div className='modal'>
<button type='button' onClick={closeModal}>
Close
</button>
<currentView.component />
</div>,
modalNode,
);
};
export default ModalView;
- Library was not tested with SSR, so I cannot guarantee that it will work out-of-the-box. If something is wrong, please create an Issue.
All browser which are compatible with ES2017.
- react >= 16.9.0