New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More

react-expand

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-expand

Simple element expand state controlling


Version published
Maintainers
2
Created

React Expand

Component for controlling expand state of each elements on page.

Usage

Somewhere in code

  <ExpandController>
      <SomeComponent/>
  </ExpandController>

Controlling expand state

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 (
            <React.Fragment>
                <button
                    onClick={this.context.changeExpandState("custom-expand-string")}
                    // Highly recommended use data attribute 
                    // for elements outside controlled element
                    data-expand="custom-expand-string"
                />
                <div
                    // In this case expand state changing on click button 
                    // and click on zone without data attribute "custom-expand-string"
                    className={this.context.isExpanded("custom-expand-string") ? "visible" : "hidden"}
                    data-expand="custom-expand-string"
                >
                    <button onClick={this.context.changeExpandState("custom-expand-string")} />
                </div>
                <div
                    // In this case expand state changing only on click button
                    data-expand-keep="more-custom-expand-string"
                >
                    <button onClick={this.context.changeExpandState("more-custom-expand-string")} />
                </div>
            </React.Fragment>
        );
    }
}

Pesets

Modal

<ModalOpenButton modalId="some-id" {...HTMLButtonElementProps}/>
<Modal modalId="some-id" defaultOpened closeOnOutside {...HTMLDivElementProps}>
    ...
    <ModalCloseButton {...HTMLButtonElementProps}/>
</Modal>

Collapse

<Collapse 
    controlElement={({state: boolean, onClick: () => void}) => <i className={state ? "open": "closed"} onClick={onClick}/>} 
    defaultOpened
    {...HTMLDivElementProps}
>
      ...
</Collapse>

Tabs

 <TabsController>
    <Header activeClassName="is-active" tabId="tab_1" {...HTMLDivElementProps} > // Click on header to activate according tab
      ...
    </Header>
    <Header tabId="tab_2" {...HTMLDivElementProps} >
      ...
    </Header>
    <Tab activeClassName="is-active" tabId="tab_1" {...HTMLDivElementProps} >
      ...
    </Tab>
    <Tab tabId="tab_2" {...HTMLDivElementProps}>
      ...
    </Tab>
 </TabsController>

FAQs

Package last updated on 23 Feb 2018

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts