I am building my first React app and I would like to build a rotating / scrolling Navbar Component. A couple of websites with examples of what I'm trying to build are Fandex (the better example) and also Numberfire (although Numberfire's doesn't scroll automatically.
Is there a Javascript library for building a moving Navbar in React?
Thanks!
First of all you need to be a familiar with the React.Component methods. The general is componentWillMount - he gives you the control over the manipulation of any event on the page just after it will be loaded. See: https://reactjs.org/docs/react-component.html#componentwillmount .
For animation rotating you can you the React library - React-Transition-Group (See: https://github.com/reactjs/react-transition-group), that gives you the full control about state changing with css effects wich you want to see on the page.
What about manual scrolling - you need to write the simple onmousedown/onmousemove events with some logic implementation to make it work and after bind it to the component constructor. How the events work in the React - see this manual https://reactjs.org/docs/handling-events.html
To make the full realization wich you want, stackoverflow is a not a lucky place for such huge work, sorry )
Related
I have created one search component using stencil and I'm integrating this stencil codebase with my react application via cdn link. I'm displaying the search component(which was created in stencil) as below in my react codebase :
<custom-search placeholder="Search"></custom-search>
The search component contains a search icon. I need to pass the text in search input field to my react code on click of this icon. How can this be achieved?
Unfortunately I haven't integrate Stencil JS component with React, but passing string data to web component should be working without too much hassle. Do you know if your React app can properly recognize your custom-search component? If not, then you might want to take a look at a link to Stencil JS official document of integrating Stencil JS component to React and make sure component get properly loaded and integrated.
If you know for sure you load the component then not sure why your placeholder is not set within your component - it is just a string after all. Maybe post the custom-search component code, as there might be issue with that (i.e. component lifecycle event you are using might not be doing what you expect to do)
Could you clarify the actual problem, please? :)
Does the component not get rendered, or are you unable to achieve communication from custom-search to the React app?
If the latter is the case, you might want to implement a Custom Event on the Stencil component, to communicate changes back to the consuming app.
As #tomokat mentioned, you should follow the official Stencil React integration docs. This is required, since React cannot handle Custom Events natively, and requires some help from the dev.
Edit: Sorry, I got confused by the first answer. Your title is quite clear, though. If you can show some example code of the component and the React integration, we could probably help in a better way.
I'm new to React.
In React, we use navigation with a library like... 'react-router-dom' to navigate to pages. My question is most of the time, I can show and hide the entire Component based on the item selected in a navigation bar. I can store a value in the state and if the selection changes, I can show another component. Then why should we use a navigation library to navigate around?
I can not find any clear information about this online. Please help.
I was writing in this answer about having a more organized code (easier to maintenance) and a better folder structure, but you could easily have it working without a navigation library.
Probably the main point to use a navigation library is, as said in React Router page, whether you want to have bookmarkable URLs for your web app or a composable way to navigate in React Native.
Web
The library will help you work with the URL, receive parameters, navigate between pages.
Mobile
You can make use of deep linking, receive parameters, navigate between screens, animations, components ready for Stack navigation, Drawer navigation, Bottom Tab navigation...
You can do anything I mentioned above by yourself, but libraries exist because other people had a need and you decide to use it if you have the same need and think it's worth it.
Why should we use a navigation library to navigate around?
In short, because they are widely used, well-tested libraries, with a performance that you may not be able to achieve easily if you want to have many different functionalities like those libraries have. And they will certainly save you a lot of time in case you need to create a way to navigate and work with things related to navigation (like those mentioned about Web and Mobile).
If your project is simple, there is no need to use a navigation library. To have a more practical experience, you can even try to do your project without using such a library, and when you are having difficulties, try replacing your logic with some library and analyze if it was worth it.
I'm after some design advice. I'm building out a React/Redux app that will, amongst other things, play Youtube videos in a modal dialog.
My initial design was to use lifecycle hooks to initialise the Youtube iframe API in the modal's componentDidMount. The problem with this approach is that the startup cost for the Youtube player is high - there's a noticeable delay between opening the modal, and the player popping in with the video.
What I need to do is initialise the player just once, and then cue up a different video based on which props are sent to the modal. However, I can't think of a nice, idiomatic design for this model.
Ideas I've had so far:
Hack around with the modal so that it never unmounts, but just hides based on some prop value.
This is the design I had with a previous non-React version of this app, but it feels very hacky, and I'd like to come up with something better.
Initialise the youtube player when the app loads, and hold the element in the store, passing it down to the modal via props to be rendered.
This is recommended against in the Redux FAQ
Initialise the youtube player at some higher level of the app which is always mounted, but hide it with CSS. On mounting the modal, move the element inside, and move it out again just before unmounting.
This is probably my favourite idea so far, it just feels like there might be a better idea out there.
Any thoughts on how to design this would be much appreciated!
There is a similar approach to what you described as the last option (preferred one).
It is called portal as far as I can remember.
The basic method is: You make manipulation with element outside of your component in componentDidMount (eg. show) and componentWillUnmount (eg. hide).
One of the powers of React is it's lifecycle methods. You can create components even without .render() method
Examples can be found here
https://github.com/tajo/react-portal
and here
https://github.com/FormidableLabs/react-music
And there is a great talk about this at React Conf, which completely changed my mind about lifecycle methods.
https://youtu.be/395ou6k6C6k
I am using React-Redux-Form and React-Bootstrap on client side of application.
I'm stuck on how to testing my components. I have made a small project on github with one of my components named LoginModal:
https://github.com/DmitryIvanovIAMM/react-redux-form-login-test/blob/master/src/tests/Foo-test.js.
To start testing, I am following this tutorial https://www.codementor.io/vijayst/unit-testing-react-components-jest-or-enzyme-du1087lh8.
But when I try to .find() button in my rendered component, the result is an array of length zero. So I can't simulate its behaviour. I try find it (button) several different way but unsuccessful. Please, your suggestion.
This issue is with the rendering of Modal component that is part of #react-bootstrap. There is a discussion about it on https://github.com/react-bootstrap/react-bootstrap/issues/876.
The alternative is to use ReactModal from react-modal. Testing it is described on http://remarkablemark.org/blog/2017/05/17/testing-react-modal/
I'm facing some issues when rendering a React component into the shadow DOM of a webcomponent.
I wrote a small piece of code to turn a React component into a webcomponent, but I want to render the
React component inside the shadow DOM of the webcomponent. But in that case, it seems that React is not able to catch UI events (click, keyPress, etc ...) anymore.
Let's take an example, let say that I have a first webcomponent <awesome-timer /> that render the React component inside the webcomponent node, and another webcomponent <less-awesome-timer /> that render the React component inside the shadow DOM of the webcomponent.
Both webcomponents use the same React component. However the one rendered inside the shadow DOM does not work, because click events on the button of the timer component does not trigger the bound function.
I guess React is not designed to handle such case, but I'd love to get more details about it.
The code of the example is available here : https://gist.github.com/mathieuancelin/cca14d31184bf4468bc1
Does anyone have an idea about it ?
I know this is kinda late but, I believe your issue when you pass any attributes to a web component they instantly become strings Because that's all you can pass to a web component. Now of course you can convert or cast them back to there original data type, except functions because once stringified they loose there scoping, lexical and all.
Now to your main question, you are were trying to pass you child element through the Main web components slot. Now you have to remember that once you pass anything to a web component you now have to use the webs components methods and return types to manage whatever you pass. So yes passing react into a web component will not work they you expect.
You will need to go back to whatever tool you use to build your web component and deal with the slot logic there. Since this is a very old post as are web components. You might not have had access to the modern web component build tool's we have today. I found Stenicl allows you to build and manage your web components in Typescript.
A good option is to change your pattern a little bit and just return web components from your react app.
Or you can use another really cool to call Lit-HTML or Lit-element. I believe they may have combined there core libraries. Anyway these tool will allow you to combine Reactjs and web components where lit-html gives you access to methods simial to Reactjs's life cycle methods. Anyway some good stuff to check out if your stuck at this point.