lwhiteley / react-push-menu Goto Github PK

Hi,
I have used react-push-menu package in my react project for mobile menu's. I am getting scrolling issue when I scroll on menu the body getting scrolled. I tried to get an event when menu's opened to apply css to handle this issue but couldn't get any event or couldn't apply any custom event also. Please help me to solve this.

Thank's.

tried yarn add react-push-menu and failed with the postinstall script:

node_modules/react-push-menu: Command failed.
Exit code: 127
Command: install-peers -f && cd example && npm i
Arguments:

then tried with npm, npm install react-push-menu, got a bit insights:

npm ERR! [email protected] postinstall: `install-peers -f && cd example && npm i`
npm ERR! Exit status 1

sh: line 0: cd: example: No such file or directory

Why the example directory does not exit? And why do you force user to install the example app?

mlpushmenu.js:155 Uncaught TypeError: Cannot read property 'addEventListener' of null at eval (mlpushmenu.js:155) at Array.forEach (<anonymous>) at mlPushMenu._initEvents (mlpushmenu.js:151) at mlPushMenu._init (mlpushmenu.js:118) at new mlPushMenu (mlpushmenu.js:79) at PushMenu.componentDidMount (index.js:147) at commitLifeCycles (react-dom.development.js:22101) at commitLayoutEffects (react-dom.development.js:25344) at HTMLUnknownElement.callCallback (react-dom.development.js:336) at Object.invokeGuardedCallbackDev (react-dom.development.js:385)

data:
const a = { header: 'All Categories', childrenCate: [ { name: 'About', id: 1, link: '/about', childrenCate: [ {name: 'Mission', id: 11, link: null, childrenCate: []}, {name: 'Objectives', id: 12, link: null, childrenCate: []}, { name: 'Goals', id: 13, link: '/about/goals', childrenCate: [ {name: 'Charity', id: 131, link: null, childrenCate: []}, {name: 'Clean Environment Plan', id: 132, link: null, childrenCate: []}, ] } ] }, {name: 'Services', id: 2, link: '/services', childrenCate: []}, {name: 'People', id: 3, link: '/people', childrenCate: []}, {name: 'Careers', id: 4, link: '/careers', childrenCate: []}, {name: 'Contact', id: 5, link: null, childrenCate: []}, ] }

<PushMenu backIcon={<FaChevronLeft />} expanderComponent={FaChevronRight} onNodeClick={(e, {menu, node}) => { console.log(node) menu.tools.reset(); }} //linkComponent={LinkComponent} isOpen={true} nodes={ a } type={'overlap'} propMap={{ displayName: 'name', linkClasses: 'classes', expanderClasses: 'expClasses', childPropName: 'childrenCate', url: 'link'}}> <div className="rpm-trigger" id="rpm-trigger" > <FaBars /> </div> </PushMenu>

It is expected that childPropName will work on entire tree. Instead it works only for the topmost element in data object for nodes.
It would be nice to make sure the rest of propMap settings work on entire tree.

Hi,
What I do:
[react-icons v2.2.1]
yarn add react react-dom [email protected] --save (it doesn't work with newest version - they change icons loading, now they are in one file /index.js/!)
yarn add react-push-menu --save
After that I include everything the doc describe, but when add
import PushMenu from 'react-push-menu';
in one of my components the project return:
index.js:44 Uncaught TypeError: Cannot read property 'string' of undefined in the console!

index.js:44:
IconBase.propTypes = { color: _react.PropTypes.string, size: _react.PropTypes.oneOfType([_react.PropTypes.string, _react.PropTypes.number]), style: _react.PropTypes.object };

[react-icons v3+] You should edit
in: build/DefaultBackButton "require('react-icons/lib/fa/chevron-left');" --> require('react-icons/lib/fa');
in: build/index.js require('react-icons/lib/fa/chevron-right'); --> require('react-icons/lib/fa');
It is describe in react-icons doc

Thank's.

Hi it's working fine without animation. Is there any option for making it animatable?

Hi,

Just realised when isOpen changed, the component mounted/unmounted, which triggers a re-render of its children. I believe it's the line here:

It affects our logic of handling side effects. Also we do need to keep the children components all the time. Do you think it is better to just set the width of the pusher to 0 when !isOpen?

What would be the proper way to default the menu to be open on initial render? Could you expose a prop? I am running the latest master, 3.0.2

197 | propMap: _react.PropTypes.object,

I expect following the docs in the example folder (npm install && npm start) would show the demo. Maybe you have to update them?

Also installing in my app I fall into some issues. ..like "react-items" are not included in the package.json but are used in the examples (why are they mandatory? Users should be able to choose their library.
or something like this error:

Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Are you willing to provide a codesandbox.io example?

thank you very much in advance

PS: Feature request: reverse sliding direction from right to left :-)

When data is defined as const data = useMemo(...) and can be null at a beginning, and later obtains some real value, this does not cause the component to re-render. Menu remains empty.