Fix customBurgerIcon and customCrossIcon definitions. They needed to be JSX.Element instead of HTML Element.

Add `State` for `onStateChange` event.
This commit is contained in:
Christopher Deutsch
2017-11-15 10:52:22 -06:00
parent d57a587a92
commit 8135ec64e4
2 changed files with 17 additions and 5 deletions
+7 -3
View File
@@ -6,13 +6,17 @@
import * as React from "react";
export interface State {
isOpen: boolean;
}
export interface Props {
burgerBarClassName?: string;
burgerButtonClassName?: string;
crossButtonClassName?: string;
crossClassName?: string;
customBurgerIcon?: Element | false;
customCrossIcon?: Element | false;
customBurgerIcon?: JSX.Element | false;
customCrossIcon?: JSX.Element | false;
id?: string;
isOpen?: boolean;
itemListClassName?: string;
@@ -20,7 +24,7 @@ export interface Props {
morphShapeClassName?: string;
noOverlay?: boolean;
disableOverlayClick?: boolean;
onStateChange?(): void;
onStateChange?(state: State): void;
// TODO (Rajab) This can be improved, though I do not know how. From PropTypes:
// styles && styles.outerContainer ? PropTypes.string.isRequired : PropTypes.string
outerContainerId?: string;
@@ -1,5 +1,5 @@
import * as React from 'react';
import { slide as Menu } from 'react-burger-menu';
import { slide as Menu, State } from 'react-burger-menu';
class Example extends React.Component {
showSettings(event: {
@@ -10,7 +10,11 @@ class Example extends React.Component {
render() {
return (
<Menu>
<Menu
customBurgerIcon={<img src="img/icon.svg" />}
customCrossIcon={<img src="img/icon.svg" />}
onStateChange={this.onStateChange}
>
<a id="home" className="menu-item" href="/">Home</a>
<a id="about" className="menu-item" href="/about">About</a>
<a id="contact" className="menu-item" href="/contact">Contact</a>
@@ -18,4 +22,8 @@ class Example extends React.Component {
</Menu>
);
}
onStateChange = (state: State): void => {
console.log(state.isOpen);
}
}