I need to add search-bar in navigation toolbar for website - reactjs

I am working on project and using material-ui#next i.e v1.x.So, which dependencies I need to install.

Since you already installed material-ui#next so you no need to install any other modules. You can acheieve search bar with material-UI Autosuggest component. Check the below link
https://material-ui-next.com/demos/autocomplete/

Related

How can I use the new MUI look & Feel?

A simple question, but can't find the way.
How can I install mui and use the theme / look and feel showed in the mui homepage?:
Here new look and feel material ui screnshoot
because, after create my project and install mui using:
npm install #mui/material #emotion/react #emotion/styled
I see the classic material design like this:
Here current classic material design example buttons
As of now you can't (at least without buying any custom theme from the store).
They use their internal custom theme built over MUI, if you go inside the MUI landing page and scroll down you can switch between their custom theme and the standard one.

Can I create a custom component library NPM package out of Material UI?

Basically I want to
Have MaterialUI as the base package (#material-ui/core)
Customize all or the required components as per my branding and style guide and generate my own component library as NPM package. (customize #material-ui/core and create own package like #myorg/core)
Use those custom components in my project by installing the NPM package & importing. (npm install #myorg/core and import 'button' from '#myorg/core/button')
Because I want to create a common component library for different react applications.
Please let me know if that makes sense.
Of course you can.
Creating a package is possible and even recommended if you want to reuse it in different applications or publish it.
Most of the packages are using another packages (called dependencies) and sometimes building new components on top of these packages' components. You can read more about dependencies here..
Packages with MIT License allows Modification as well.
More information about creating NodeJS modules can be found here.
And finally, if you are willing to publish the package in NPM, follow this.

Install specific react-bootstrap component class only?

I am new to building websites with react bootstrap and very recently I used node to install the react-tabs component. I would like to do the same for react-bootstrap/Carousel without installing other react-bootstrap classes and components (as I don't want the css to interfere with existing css in my project as I am using many similar classes as the react-bootstrap library). Please guide me on how to do this. thanks!

WebStorm auto completion does not work for React js

I've created a project using create-react-app. I have switched my JavaScript language version to React JSX in Preferences | Languages & Frameworks | JavaScript.
But I still have unresolved variable warning and unresolved function warning.
The simplest way to achieve correct code completion while developing any (not only react) app is to add support for required type scrip libraries via IDE itself. Assuming you using JetBrains IDE for web dev (may be not WebStorm but IntelliJ IDEA):
go to Settings (Ctrl + Alt + S) -> Languages & Frameworks
expand JavaScript
pick Libraries, you'll see something like this
click Download...
search for any libraries you need (you can just start typing lib name in libs list), then click Download and Install
when using react, I suggest to add: react; react-dom; react-native (if you interested in mobile dev)
click Apply when you done
commonly you don't need to restart IDE, changes will apply immediately.
Happy coding!
To enhance code completion we recommend that you add a TypeScript
definition file for React with npm install --save #types/react
ref: blog.jetbrains
On WebStorm, open Preferences, Expand the Languages & Frameworks, then expand JavaScript, click on Libraries. Click the Add button and add react to list of libraries.
Restart WebStorm.
Or
You do this:
You can add a TypeScript definition for React with npm install --save #types/react
Also, for reference, according to https://youtrack.jetbrains.com/issue/WEB-24780#comment=27-2681125 it is possible to solve it entirely within IntelliJ instead of running the npm command manually.
You can search for all the packages you need for the autocompletion.

Can I use react-select in react-native?

I'm trying to implement a search form, in my react-native app. For it, I need something like react-select or select-2, both tools are made for web systems and I don't know if is a good idea to use it for a react-native app.
I already tried to install and use it in react-native but this does not appear to work.
You can't use select2 or react-select with react-native, because it's DOM based and so, it will work only in navigator, not in react-native
The closest react-native equivalent I've found is react-native-multiple-select, you can find it on github at https://github.com/toystars/react-native-multiple-select or install it with
npm i react-native-multiple-select
Probably the closest to what you want that comes bundled with React Native is http://facebook.github.io/react-native/docs/picker.html
The Picker component will give you a tumbler thing on iOS and a dropdown on Android
Alternatively maybe this 3rd party component is closer to what you want: https://github.com/bulenttastan/react-native-list-popover
From How to use React native select box

Resources