Super Sale Limited Time 50% OFF for All-Access Plans
Save 50% Now

Drawer component in react


Hello,

Can't really find the proper way to close a drawer programatically in the react demo.

There is nothing in the docs about drawers and the KTDrawer seen in the HTML docs apparantly is not available in react. What would be the right way to close a drawer from a function?

Thank you!


Text formatting options
Submit
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • happy  :)
  • shocked  :|
  • sad  :(

Replies (3)

Offensive gameplay in basketball stars is all about strategy. Players can use fake shots, quick dribbles, and sudden direction changes to confuse their opponents and create open scoring opportunities.


Hi,

Mostly js drawer component in the HTML version is the same as a ts drawer component in react version. We will consider adding documentation for typescript components in upcoming releases.

Since the biggest part of the HTML, drawer components is the same as react drawer, for now, you can refer to the HTML version's drawer doc, also if you have any questions regarding our components you can ask them here.

To close the drawer in the function you can call a hide function of DrawerComponent instance.

const closeDrawer = () => {
DrawerComponent.getInstance("kt_drawer_chat")?.hide();
};



Hi Lauris,

My question was concerning react but your answer did solve the issue. Thank you!


Text formatting options
Submit
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • happy  :)
  • shocked  :|
  • sad  :(