Hi I am not sure if this is about my VScode settings or the way I installed bootstrap. I used yarn to install react-bootstrap and bootstrap as show in react-bootstrap's documentation. But when I type <Button and press enter it automatically imports <Button component like this:
import { Button } from "bootstrap";
this doesn't work. I have to manually fix it to
import { Button } from "react-bootstrap";
is it a bug or did I do something with wrong order?
If you have inline suggestions turned on (Preferences -> Text Editor -> Suggestions), you'll see that Intellisense provides import suggestions alphabetically — first by identifier then by package.
With inline suggestions, you're given a list you can navigate through to select whichever option you're looking for. In this case, you'd type But and it would show the react-bootstrap Button as the second option, so you'd press down arrow and tab to accept that option.
Related
I wanted to use icons in my react-native app, so I installed react-native-elements. The Icons itself work but I have to add a property called tvParallaxProperties on the Icon element like that:
<Icon tvParallaxProperties={undefined} name={'up'} type="antdesign" />
I read the docs and google about that, but I cant find the use of that. Does anyone know why I need this property and whats the use of it?
If you don't want to write this option under all of the Icons there's 2 solutions.
First which I don't recommend if you are creating real project not for training purpose.
Install RN Elements bleeding Edge from docs and the newest BETA version (unstable).
Or which worked for me is change imports of Icons like:
import { Icon } from 'react-native-elements' to: import Icon from 'react-native-vector-icons/AntDesign';. The last element of import of course is your Icons package and you can change it fe. to: MaterialCommunityIcons
After adding this import you can delete option type: antdesign and this tvParallaxProperties={undefined}
Like docs says tvParallaxProperties are for (Apple TV only) Object with properties to control Apple TV parallax effects.
so I created a consoledata.ts file to log whatever I pass in it as an argument like so:
/* eslint-disable no-console */
export default function ConsoleData(props: any) {
console.log(props);
}
now using the VSCode search icon, I changed every console.log in my code to consoleData since it'll probably take me all day to change them one by one.
now my issue is, the consoleData module is not imported. is there a way I can do this?
There are two ways to auto import in VSCode. The first way is using quick fix. If you are on MacOS, you can do Cmd + . to open the quick fix dialog and then you import the module.
The second option is to use auto import suggestions. They show suggestions as you type. If you are on MacOS, select the function/class you want to import and then you can do Ctrl + Space to open the auto import suggestions dialog.
I have a problem adding the monitor_heart icon from material-design-icons/font to a react project. The icon is located here:
(https://marella.me/material-icons/demo/) you have to type "monitor_heart"
So far I added icons from material-ui without any problem unfortunately here I have a problem.
I have installed the package:
npm and #material-design-icons/svg
I imported the icon:
import monitor_heart from "#material-design-icons/svg/filled/monitor_heart.svg"
i add it to App:
div <monitor_heart /> /div //or {monitor_heart}
but it not work -I don't know how can I get to this specific icon and just execute it / show it on the screen. What I did it wrong? Can anyone help me?
code located here:
https://github.com/beginnerinreact/material-icon-problem
Ok now it works!
I had to add correct form of import:
import { ReactComponent as Monitor_heart } from "#material-design-icons/svg/outlined/monitor_heart.svg" where I have to stress that this is a React component
I have added some CSS to React-Bootstrap's NavDropdown component in order to get it to expand on hover. However, the default click-to-expand behavior is then problematic, as you can click one menu to toggle it open, and then hover over another one, causing two to expand at once. I have demonstrated this here: https://codesandbox.io/s/61vjn41mzz
Is there a way to disable the toggle functionality that comes with React-Bootstrap's NavDropdown? I've tried to call event.PreventDefault() and event.stopPropogation() with no luck, which you can see in the code sandbox.
This was a good article in helping me understand as well as solve this issue: https://medium.com/#ericclemmons/react-event-preventdefault-78c28c950e46
I ended up using the library "react-native-listener" (referenced in the article) like this:
import { NavDropdown } from "react-bootstrap";
import NativeListener from 'react-native-listener';
.
.
.
<NativeListener stopClick>
<NavDropdown title="Services">
.
.
.
.
</NavDropdown>
</NativeListener>
Using react, I'm trying to prevent the user from leaving a particular page displaying a message and saving his work.
I know that I could use Prompt to display a standard message with ok/cancel buttons, like this:
import { Prompt } from 'react-router'
<Prompt
when={hasToBlockNavigation}
message="Do you want to leave without saving?"
/>
but I'm looking for a way to display a custom component instead of the standard windows and to associate custom functions for the ok/cancel button. I found some other solution using the setRouteLeaveHook function, but it's not supported any more.
Any suggestions?
Thank you.
i believe you can use "react-router-navigation-prompt" which is according to their document :-
Promps user to confirm navigation. A replacement component for the react-router . Allows for more flexible dialogs.
npm i react-router-navigation-prompt
and then use your owm component like below - am using their example .
import NavigationPrompt from 'react-router-navigation-prompt';
import ConfirmNavigationModal from './your-own-code';
<NavigationPrompt when={this.state.shouldConfirmNavigation}>
{({onConfirm, onCancel}) => (
<ConfirmNavigationModal when={true} onCancel={onCancel} onConfirm={onConfirm}/>
)}
</NavigationPrompt>