react-gm-split v1.1.6
react-gm-split
Here is a codesandbox Demo
Install
npm install --save react-gm-split
Usage
import Split from 'react-gm-split'
/*
At some root level, not each instance/file,
import the styles which are required.
*/
import 'react-gm-split/dist/index.css'
...
export default function MyComponent(props) {
return(
<Split>
<MyLeftComponent/>
<MyRightComponent/>
<Split>
)
}
or (as a simple concept example)
const [userMode, setUserMode] = React.useState(1)
return(
<Split firstChildIsHeader={true}>
<AppHeader {...{userMode,setUserMode}}/>
{userMode === 1 && <UserLeftMenu/>}
{userMode === 2 && <AdminLeftMenu/>}
{userMode === 1 && <UserRightContent/>}
{userMode === 2 && <AdminRightContent/>}
<Split>
)
The Split
component will setup a split when there are 2 ( 3 when firstChildIsHeader
is true ) valid React.Components within the children array. So there can be null
or false
items as a result of a map or direct conditions like above, and they will be ignored when split is checking for children to return.
Review the example(s) for a better sense of how to use the component.
Properties
id: string | number
as: string 'vertical' | 'horizontal' (default:'vertical)'
passProps: boolean (default:false)
gutterSize: string | number (pixel)
gutterStyle: React.CSSProperties
gutterRender: React.Component
gutterOverlay: boolean (default:true)
collapsedSize: string | number (pixel)
leftTopMinSize: string | number (percent)
leftTopMaxSize: string | number (percent)
gutterHoverStyle: React.CSSProperties
leftTopBackground: string
firstChildIsHeader: boolean (default:false)
collapseTransition: boolean (default:true)
initialLeftTopSize: string | number (percent)
initialLeftTopState: boolean (default:true)
initialCollapsedState: boolean (default:false)
rightBottomBackground: string
leftTopOverflowHidden: boolean
containerAttributes: containerAttribute[]
- { container: 'header' | 'leftTop' | 'rightBottom' | 'nonSplit', name: string, value: any }
initialRightBottomState: boolean (default:true)
rightBottomOverflowHidden: boolean
Size
related properties
The component works by calculating and setting percentage for LeftTop by setting the with/height of the single LeftTop
container within the split tree of elements. So just think of the first child as being left
or top
based on rather the split is vertical
or horizontal
gutterSize
& collapsedSize
are treated as pixels.
The other Size
related properties are treated as percent.
passProps
When set to {true}
an additional object named splitProps
is passed to the children of Split
which contains the state props and some additional methods of the Split
container.
action
- object of action types
dispatch( actionType )
- collapse
- restore
- hideLeftTop
- hideRightBottom
isCollapsed()
getSessionData()
isLeftTopHidden()
isRightBottomHidden
getParentClientRect()
Key Behaviors
- Can add a
header
component which can be easily used as a page navigation layout or properties editor with controls etc... - Should be plenty of data attributes along with the existing
style
related properties to easily style the split/gutter to your liking using various aproaches. One could always make a copy of the index.css in the dist folder and import a modified version as another approach. - If the children count is something other than 2 or 3 if header property is true, it simply returns/renders the children within the main container but does not split the children.
- Has collapse (LeftTop) and hide (LeftTop/RightBottom) actions that can be envoked from the child elements using a passed dispatch method.
passProps
must be set to{true}
- Has by default a transition style property which you could simulate mobile page panning left to right using the hide/restore actions with nested
Split
components. - Parent wrapping element does not trigger state when resizing... allowing for resizing and actions to not envoke children render during those activites.
- Children can reference and get parent dems and properties via the passed
splitProps
properties.passProps
must be set to{true}
Notes
- Per usual with "Split" components, the css path of overflow and width/height impact the behavior.. I usuallly set html,body & root to 100v(h/w) with overflow: hidden before throwing splits out :)
- Uses sessionStorage (key={id}-split) to keep restore snapshots etc.. which relies on the
id
property to be unique. One is assigned by default, but if you manually pass one.. make sure it's unique within the scope of renderedSplits
at one time. If your page conent changes and theSplit
component is unmounted and then changed back to render the sameSplit
component... the last position and state (collapsed or hidden etc...) will remain if the sameid
is applied... with the exception of nestedSplit
s that might be within a component that is modifing children/count. - Properties such as ...Render and ...Style are objects which I have not yet added a compare. Most of the other properties will trigger a state update and re-render with new values applied, the exception being the properties that start with
initial
... as those are then checked against session after very first render. This maintains user sizing and action persistance.
License
MIT © grininmonkey