I was creating React project and here is the component that I want to ensure that is put inside a string.
<InfoIcon
tooltip={`${hints.todoHint} <br/> ${hints.inProgressHint} <br/> ${hints.doneHint}`}
/>
but it is not working since br/ is literally rendered like br/
One option is to convert tooltip in to three props and add <br /> in the InfoIcon component. For example InfoIcon component can be
const InfoIcon = ({ todoHint, inProgressHint, doneHint }) => (
<div>
{todoHint}
<br />
{inProgressHint}
<br />
{doneHint}
</div>
);
// Using Info Icon
<InfoIcon todoHint={todoHint} inProgressHint={inProgressHint} doneHint={doneHint} />
Other option is to send tooltip as follows
const tooltip = (
<div>
{hints.todoHint}
<br />
{hints.inProgressHint}
<br />
{hints.doneHint}
</div>
)
<InfoIcon tooltip={tooltip} />
Well, material-ui tooltip allows you to use ANY kind of HTML content. => refer to official document customized tooltiops
This means you can use normal <div> and <Typography />, and any other styled elements to handle multi-line content.
The only thing you need to do is pass the content to props title => refer to document of tooltip api
import {
Tooltip,
Typography
} from '#material-ui/core';
<Tooltip
title={ // customized content here via props `title`
<>
<div>Seperate line</div>
<Typography>Seperate line</Typography>
</>
}
>
<IconButton aria-label="delete">
<InfoIcon /> // You can use your original icon here
</IconButton>
</Tooltip>
Watch it online: https://stackblitz.com/run
You can find related question here: How to make line break for ToolTip titles in Material-UI
Related
I have a common grid component where I define the structure of the grid and also structure of a button bar that goes on top of the grid.
Common-grid.js
<Box height='100%' width='100%' position='absolute'>
<div className="common-grid">
<div className="button-bar">
</div>
<div className="ag-grid">
</div>
</div>
</Box>
I pass data to the grid from my other component based to fill in the grid.
MyComponent.js
{gridData.length > 0 && <Grid tableData={gridData} columnData={activeListColumnDef} {...props}/>}
Along with the data, I would also like to pass icon buttons that I would like to see in button bar.
<IconButton
icon={<AddIcon />}
onClick={onClickOpenActiveListEditor}
/>
<IconButton
icon={<EditIcon />}
/>
I do not want to define icon buttons in the common component but pass it as props. Is it possible to pass such html elements along with its event listeners as props? Please help!
Sure, it's called a render prop. Just directly pass the node like this:
// in the parent component
<Grid
tableData={gridData}
columnData={activeListColumnDef}
icon={<AddIcon onClick={onClickOpenActiveListEditor} />}
{...props}
/>
// in the Grid component
function Grid({tableData, columnData, icon}){
return (
<>
// grid stuff
{icon && icon}
</>
)
}
If you need typescript support, the node would typed as such:
interface GridProps{
// stuff
icon?: React.ReactNode;
}
You could do something like:
const renderIcon = (onClick) => {
return <Icon onClick={onClick} />
}
...
<IconButton renderIcon={renderIcon} />
Then, inside IconButton:
{renderIcon()}
Hey guys I'm a newbie trying to make a material UI temporary drawer and by default the value of the onClick event is a string and I have no idea how to convert it into an icon.
return (
<div>
{['Home'].map((anchor) => (
<React.Fragment key={anchor}>
<Button onClick={toggleDrawer(anchor, true)}>{anchor}</Button>
<SwipeableDrawer
anchor={anchor}
open={state[anchor]}
onClose={toggleDrawer(anchor, false)}
onOpen={toggleDrawer(anchor, true)}
>
{list(anchor)}
</SwipeableDrawer>
</React.Fragment>
))}
</div>
);
As you can see: "HOME" is a string and what shows up on the site UI is just the "HOME" word that is a button. How do I format the code so the "HOME" button would not display a string but an icon instead. I'd be using MenuIcon from Material UI Icons to take its place. Thanks!!
You can use Icon component and pass the string to the children props. Before that, remember to add the material icon font to your html file
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
import IconButton from "#material-ui/core/IconButton";
import Icon from "#material-ui/core/Icon";
...
{["home", "star", "add_circle"].map((name) => (
<IconButton>
<Icon>{name}</Icon>
</IconButton>
))}
Live Demo
I want to implement Search bar in the center of App bar of material-ui. I have tried all possible ways and I have referred this code snippet , but can't find a solution for it.
My code snippet is
<div>
<MuiThemeProvider muiTheme={muiTheme} class="navbar">
<AppBar
title='Module Name'
onTitleClick={handleClick}
iconElementRight={<FlatButton label='LogOut' />}
onClick = {handleclick}
/>
</MuiThemeProvider>
</div>
It will be helpful if I get any solution for it.
You can use children property to add any node in AppBar, like this:
<AppBar
title="Title"
children= {
<input />
}
/>
Use styling on input field, check the working codesandbox.
you can add a ToolBar contains a Textfield
you can check documentation ,this is a Demo
Using only Material UI
<AppBar>
<Toolbar>
<Input
type="search"
/>
</Toolbar>
</AppBar>
You can check the docs here.
Installing another framework.
npm i material-ui-search-bar
A basic code snippet can be found on the main page.
import SearchBar from "material-ui-search-bar";
// *snip*
return (
<SearchBar
value={this.state.value}
onChange={(newValue) => this.setState({ value: newValue })}
onRequestSearch={() => doSomethingWith(this.state.value)}
/>
);
You can check the docs here.
Try this
<AppBar>
<Toolbar>
<InputBase placeholder="Search for products, brands and more" />
</Toolbar>
</AppBar>
Pass a prop in the AppBar component
<AppBar
title="Title"
showSearch= {
<Toolbar>
<InputBase placeholder="Search" />
</Toolbar>
}
/>
You can handle AppBar component based on customName prop like if you're passing this prop then it should show Search else not.
I have recently started exploring Material UI and I have run into this strange behavior of a hintText in a TextField Component(the one from Material UI)
This is my code:
/* in my component ... */
/* ... */
render() {
const actions = [
<FlatButton
key="1"
label="Cancel"
primary
onTouchTap={this.handleClose}
/>,
<FlatButton
key="2"
label="Submit"
primary
type="submit"
onTouchTap={this.handleSubmit}
/>
];
return (
<div>
<IconButton
tooltip="Add Asset"
onTouchTap={this.handleOpen}>
<Add color={"#000"} />
</IconButton>
<Dialog
title="Add"
actions={actions}
modal
open={this.state.open}>
<form>
<TextField hintText="Type"
value={this.state.name}
onChange={this.handleName}/>
</form>
</Dialog>
</div>
);
}
So when I start typing in the textfield, the hinttext remains, resulting in unreadable text due to letters over another letters.
I would really appreciate it if someone could help me. :)
image
Try using placholder="Type" rather than hintText="Type".
The solution for this is that you will have to update the variable name in the function handleName everytime the user updates the field. So the complete code is:
<TextField
hintText="Type"
value={this.state.name}
onChange={this.handleName}
/>
and the function handleName:
handleName=(event)=>{
this.setState({name:event.target.value});
}
It should work. If not, let me know in the comments below!
I have the following code snippet, which doesn't display anything at all in the browser window. Can you please tell me why.
render(){
return (
<div>
//Rama
//console.log('In Render'),
<div>
enter code here
<div>
<TextField
hintText="Username"
/>
<br/>
<TextField
hintText="Password"
/>
<br/>
<RaisedButton label="Login" primary={true} />
</div>
<div>
<TextField>Login Successful</TextField>
</div>
</div>
)
}
pastebin link for complete component: http://pastebin.com/etjUwvWT
To render material-ui components you need to wrap them in MuiThemeProvider.
As Per DOC:
Beginning with v0.15.0, Material-UI components require a theme to be
provided. The quickest way to get up and running is by using the
MuiThemeProvider to inject the theme into your application context.
How to use these components?
First use this line to import MuiThemeProvider :
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
Use this render method:
render(){
return (
<MuiThemeProvider muiTheme={getMuiTheme()}>
<div>
<div>
<TextField
hintText="Username"
/>
<br/>
<TextField
hintText="Password"
/>
<br/>
<RaisedButton label="Login" primary={true} />
</div>
<div>
<TextField/>
</div>
</div>
</MuiThemeProvider>
);
}
If you are using material-ui components across the project then no need to use MuiThemeProvider on each page, you also include it globally. Include this in your router or put this line on main page of the application.
One more thing you are only importing the injectTapEventPlugin, you need to initialise that also. Put this line in this component after importing:
injectTapEventPlugin();
Looks like you're having JS-comments (//) in your JSX code. That'll make stuff break.
If you want to comment something out in JSX, you have to escape into JS with curly brackets and then use multi line comments (/* comment */) - like so:
render() {
return (
<div>
{/* <button>Commented out button</button>*/}
</div>
);
}
Remove text from between the TextField tags. Also wrap your code in your render method between MuiThemeProvider.
This worked for me.
render(){
return (
<MuiThemeProvider>
<div>
<div>
<TextField
hintText="Username"
/><br/>
<TextField
hintText="Password"
/><br/>
<RaisedButton label="Login" primary={true} />
</div>
<div>
<TextField></TextField>
</div>
</div>
</MuiThemeProvider>
);
}
As an FYI, so it is not the most obvious responses, but just in case this is your situation, my issue was that I had changed my Windows 10 personalise settings to use contrast and my blue bar in my React app disappeared! After a while of searching, I switched it off and my bar was back.