Simple element expand state controlling
npm install react-expandComponent for controlling expand state of each elements on page.
Somewhere in code
``jsx`
Controlling expand statetsx
import * as React from "react";
export class SomeComponent extends React.Component {
...
public static readonly contextTypes = ExpandControllerContextTypes;
public readonly context: ExpandContext;
...
public componentDidMount() {
this.context.changeExpandState("custom-expand-string", false, { someData: "data" })();
}
public componentWillUnmount() {
console.log(this.context.getState("custom-expand-string")); // {someData: "data"}
}
public render(): JSX.Element {
return (
// Highly recommended use data attribute
// for elements outside controlled element
data-expand="custom-expand-string"
/>
// and click on zone without data attribute "custom-expand-string"
className={this.context.isExpanded("custom-expand-string") ? "visible" : "hidden"}
data-expand="custom-expand-string"
>
$3
###### 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
component is depricated. Use ExpandControl and ControlledExpandElement instead##### OLD
`jsx
defaultOpened
{...HTMLDivElementProps}
>
...
`##### NEW
jsx
expandId="collapse-id"
activeClassName="is-active"
state={{myData: true}}
activeOnMount
>
...
expandId="collapse-id"
closeOnOutside
>
...
`#### Tabs
Prop
is depricated. Use expandId instead##### OLD
`jsx
...
...
...
...
`##### NEW
jsx
...
...
...
...
`#### Popup
component is depricated. Use ExpandControl and ControlledExpandElement instead##### OLD
`jsx
// Single component
...
...
`##### NEW
jsx
expandId="popup-id"
triggerEvent="hover" // or "click"
activeClassName="is-active"
>
...
expandId="popup-id"
closeOnOutside
>
...
`#### Modal
and ModalCloseButton components is depricated. Use ExpandControl instead##### OLD
`jsx
...
`##### NEW
jsx
...
`$3
NOTE: You must provide context to child nodes with
#### HashListener
jsx
// will expand element with expandId 'expandElementId1' and 'expandElementId2'
// when href will be 'somepath/#expandElementId2/anotherPathIfYouWant/#expandElementId1'
console.log(expandId)}>
`#### HashControl
jsx
// same as html link, except activeClassName, that binds when element with
// href, that contains expand keys, is active
activeClassName="active"
href="somepath/#expandElementId2/anotherPathIfYouWant/#expandElementId1"
>
...
`#### Tabs
jsx
// Click on header to activate according tab
...
...
...
...
`#### Modal
jsx
...
`#### Expand
jsx
expandId="some-expand-id"
triggerEvent="hover"
activeClassName="is-active"
staticState={true}
>
show
expandId="some-expand-id"
triggerEvent="hover"
activeClassName="is-active"
staticState={false}
>
hide
expandId="some-expand-id"
triggerEvent="click"
activeClassName="is-active"
activeOnMount
>
hide
expandId="some-expand-id"
>
...
`#### Slider
jsx
...
// Slide that will be displayed on mount
...
...
...
// will render [[some banner 1, some banner 2, some banner 3], [some banner 4, some banner 5, some banner 6], [some banner 7]]
some banner 1
some banner 2
some banner 3
some banner 4
some banner 5
some banner 6
some banner 7
...
...
`$3
Because
does not support SSR, you must modify code for correct work of componentClient side
`jsx
export class Layout extends React.Component {
public render(): React.ReactNode {
return (
...
);
}
}
`Server side
tsx
app.get("*", (request, response) => {
ReactDOMServer.renderToNodeStream(
{StaticContainer.renderStatic()}
).pipe(response);
})
` and