React Expand
Component for controlling expand state of each elements on page.
Usage
Somewhere in code
<ExpandController> <SomeComponent/></ExpandController>
Controlling expand state
;
Migration from 1.x.x to 2.x.x
Short overview
v1.x.x | v2.x.x |
---|---|
< Collapse /> | < ExpandControl /> as controlElement < ControlledExpandElement /> as < Collapse /> |
< Header /> | tabId -> expandId |
< Tab /> | tabId -> expandId |
< Popup /> | < ControlledExpandElement /> as < Popup /> |
< ModalOpenButton /> | < ExpandControl staticState={true} /> as < ModalOpenButton /> |
< ModalCloseButton /> | < ExpandControl staticState={false}/> as < ModalCloseButton /> |
Collapse
Collapse
component is depricated. Use ExpandControl
and ControlledExpandElement
instead
OLD
<Collapse = > ...</Collapse>
NEW
<ExpandControl ="collapse-id" ="is-active" = > ...</ExpandControl><ControlledExpandElement ="collapse-id" > ...</ControlledExpandElement>
Tabs
Prop tabId
is depricated. Use expandId
instead
OLD
<TabsController> <Header ="is-active" ="tab_1" > ... </Header> <Header ="tab_2" > ... </Header> <Tab ="is-active" ="tab_1" > ... </Tab> <Tab ="tab_2" > ... </Tab></TabsController>
NEW
<TabsController> <Header ="is-active" ="tab_1" > ... </Header> <Header ="tab_2" > ... </Header> <Tab ="is-active" ="tab_1" > ... </Tab> <Tab ="tab_2" > ... </Tab></TabsController>
Popup
Popup
component is depricated. Use ExpandControl
and ControlledExpandElement
instead
OLD
<PopupControl ="popup-id" => // Single component ...</PopupControl><Popup ="popup-id" > ...</Popup>
NEW
<ExpandControl ="popup-id" ="hover" // "click" ="is-active"> ...</ExpandControl><ControlledExpandElement ="popup-id" > ...</ControlledExpandElement>
Modal
ModalOpenButton
and ModalCloseButton
components is depricated. Use ExpandControl
instead
OLD
<ModalOpenButton ="some-id" /><Modal ="some-id" > ... <ModalCloseButton /></Modal>
NEW
<ExpandControl ="some-id" = /><Modal ="some-id" > ... <ExpandControl ="some-id" = /></Modal><ExpandControl ="some-id" = /> // close button actualy can be outside modal
Presets
NOTE: You must provide context to child nodes with <ExpandController>
HashListener
// will expand element with expandId 'expandElementId1' and 'expandElementId2'// when href will be 'somepath/#expandElementId2/anotherPathIfYouWant/#expandElementId1'<HashListener => <ControlledExpandElement ="expandElementId1"/> <ControlledExpandElement ="expandElementId2"/></HashListener>
HashControl
// same as html link, except activeClassName, that binds when element with// href, that contains expand keys, is active<HashControl ="active" ="somepath/#expandElementId2/anotherPathIfYouWant/#expandElementId1" > ...</HashControl>
Tabs
<TabsController ="tab_2"> <Header ="is-active" ="tab_1" > // Click on header to activate according tab ... </Header> <Header ="tab_2" > ... </Header> <Tab ="is-active" ="tab_1" > ... </Tab> <Tab ="tab_2" > ... </Tab></TabsController>
Modal
<ExpandControl ="some-id" = /><Modal ="some-id" > ... <ExpandControl ="some-id" = /></Modal><ExpandControl ="some-id" = />
Expand
<ExpandControl ="some-expand-id" ="hover" ="is-active" => show</ExpandControl><ExpandControl ="some-expand-id" ="hover" ="is-active" => hide</ExpandControl><ExpandControl ="some-expand-id" ="click" ="is-active" > hide</ExpandControl><ControlledExpandElement ="some-expand-id"> ...</ControlledExpandElement>
Slider
<SliderController => <Slide > ... </Slide> // Slide that will be displayed on mount <Slide > ... </Slide> <Slide = > ... </Slide> <Dots /></SliderController><SliderController> <SlideButton = > ... </SlideButton> // will render [[some banner 1, some banner 2, some banner 3], [some banner 4, some banner 5, some banner 6], [some banner 7]] <SlideGroup => <span>some banner 1</span> <span>some banner 2</span> <span>some banner 3</span> <span>some banner 4</span> <span>some banner 5</span> <span>some banner 6</span> <span>some banner 7</span> </SlideGroup> <SlideButton = > ... </SlideButton> <Dots ="active" > ... </Dots></SliderController>
Server-side render
Because ReactDOM.createPortal
does not support SSR, you must modify code for correct work of <Modal/>
component
Client side
Component public : ReactReactNode return <ExpandController> <Modal ="some-id" > ... </Modal> </ExpandController> ;
Server side
app.get"*",
You also can use <StaticContainer/>
and <OuterContextPorvider/>
in your needs.