@rtbjs/use-state
Version:
`@rtbjs/use-state` is a state management tool that can act as a local state and be easily turned into a global redux state. It is an innovative approach to state management that combines the advantages of both React's useState and Redux's state management
28 lines • 1.2 kB
JavaScript
import { __assign } from "tslib";
import { jsx as _jsx } from "react/jsx-runtime";
import { useContext } from 'react';
import { useUID } from 'react-uid';
import { DraggableModalContext } from './DraggableModalContext';
import { DraggableModalInner } from './DraggableModalInner';
import { getModalState } from './draggableModalReducer';
export var DraggableModal = function (props) {
// Get the unique ID of this modal.
var id = useUID();
// Get modal provider.
var modalProvider = useContext(DraggableModalContext);
if (!modalProvider) {
throw new Error('No Provider');
}
var dispatch = modalProvider.dispatch, state = modalProvider.state;
var modalState = getModalState({
state: state,
id: id,
initialHeight: props.initialHeight,
initialWidth: props.initialWidth
});
// We do this so that we don't re-render all modals for every state change.
// DraggableModalInner uses React.memo, so it only re-renders if
// if props change (e.g. modalState).
return (_jsx(DraggableModalInner, __assign({ id: id, dispatch: dispatch, modalState: modalState }, props)));
};
//# sourceMappingURL=DraggableModal.js.map