0

Hi I am a beginner in React, I am using Fluent UI in my project . I am planning to use Panel control from Fluent UI and make that as common component so that I can reuse it.I use bellow code

import * as React from 'react';
import { DefaultButton } from '@fluentui/react/lib/Button';
import { Panel } from '@fluentui/react/lib/Panel';
import { useBoolean } from '@fluentui/react-hooks';

export const PanelBasicExample: React.FunctionComponent = () => {
  const [isOpen, { setTrue: openPanel, setFalse: dismissPanel }] = useBoolean(false);

  return (
    <div>
      
      <Panel
        headerText="Sample panel"
        isOpen={isOpen}
        onDismiss={dismissPanel}
        // You MUST provide this prop! Otherwise screen readers will just say "button" with no label.
        closeButtonAriaLabel="Close"
      >
        <p>Content goes here.</p>
      </Panel>
    </div>
  );
};

https://developer.microsoft.com/en-us/fluentui#/controls/web/panel#best-practices

I remove <DefaultButton text="Open panel" onClick={openPanel} /> from the example .

So my question is how can I open or close this panel from any other component ?

kuntal
  • 1,591
  • 2
  • 16
  • 36

1 Answers1

0

I would use React useState hook for this.

Make a state in the component that you want render the Panel like

const [openPanel, setOpenPanel] = useState({
     isOpen: false,
     headerText: ''
})

Lets say for example you will open it from button

  <Button onClick={() => setOpenPanel({
           isOpen: true,
           headerText: 'Panel-1'
       })
     }> Open me ! </Button>

Then pass the state as props to the Panel component

    <PanelBasicExample openPanel={openPanel} setOpenPanel={setOpenPanel} /> 

in PanelBasicExample component you can extract the props and use it.

    export const PanelBasicExample(props) => {
      const {openPanel, setOpenPanel} = props
      const handleClose = () => {setOpenPanel({isOpen: false})}
     return (
    <div>  
      <Panel
        headerText={openPanel.headerText}
        isOpen={openPanel.isOpen}
        onDismiss={() => handleClose}
        // You MUST provide this prop! Otherwise screen readers will just say "button" with no label.
        closeButtonAriaLabel="Close"
      >
        <p>Content goes here.</p>
      </Panel>
    </div>
  );
}
todevmilen
  • 82
  • 1
  • 12