I am struggling with my React Native App!!!!
I have a simple Flatlist.
I have a TextInput that has a filter option.
Click inside the TextInput. A dropdown of filter appears.
Click on that Filter it appears inside the TextInput.
Need some help in styling this!!! It should look somewhat like this. If not to this extent at least a box around it is fine.
I tried it with a Button - React Native elements. It's so so so frustrating. I cannot use any 3rd party libraries (company policy).
TextInput Code:
<Icon type='materialicons' name='search' /> // search icon
<Button icon={<Icon name="check"/>}. //my attempt to create a button around the filter
type='clear' title ={val}
onPress={()=>{this.handleFilterIcon(false); this.setFilt(false)}}/>
<TextInput // Text Input
value={value}
placeholder='Search Here...'
onChangeText={(text)=>{this.handleSearch(text, true);this.renderDropDown(false)}}
onTouchStart={()=>{this.setTempNotifications();this.renderDropDown(true)}}
style={{ height: 40, flex: 1}}
autoCapitalize='none'
selectTextOnFocus={true}
label='input'
/>
<Icon type='materialicons' name='cancel' onPress={()=>{} /> // Clear Icon
<Button title='Cancel'
buttonStyle={{backgroundColor:'#D3D3D3', borderColor: 'grey', borderRadius: 6 , borderWidth: 1, height: 40}}
onPress={()=>{} /> // Cancel button
Anyone please tell me the most efficient way to do this!!!
The only way I'm seeing is, since you don't have to use third party libraries is this:
Create a an empty label next to the input. Wrap these two with a div with position:relative
As soon as input is entered, put the same text in this label. Customise this label with styling: position:absolute;background:grey...
Just to give you some idea, here's an implementation in JQuery. You have to take this forward and ask specific question where you're struggling.
function inputChange(val){
$('label').text(val);
$('input').val("");
}
label{
border:1px solid;
border-radius: 5px;
position: absolute;
background: grey;
left:2px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<input type="text" onchange="inputChange(this.value)"/>
<label></label>
</div>
In React the same implementation could look something like this. You can create a file with this implementation, import in your App.js and see. Take this idea fowrward and change the styling and behaviours as per the need.
import React, { Component } from 'react';
class CustomInputTextstyling extends Component {
constructor(props) {
super(props);
this.state ={
inputText: ""
}
}
handleInputChange(e){
this.setState({inputText: e.target.value});
}
render() {
const wrapperDiv = {
position: 'relative'
}
const label = {
border:'1px solid',
borderRadius: '5px',
position: 'absolute',
background: 'grey',
left:'2px'
}
return (
<div style={wrapperDiv}>
<input type = "text" onBlur = {this.handleInputChange.bind(this)}></input>
<label style={label}>{this.state.inputText}</label>
</div>
);
}
}
export default CustomInputTextstyling;
I'm using this React Material Modal. In the demo examples you can see that when you open the modal, has a blue border.
There's a way to remove it?
I see in the Modal Api that haves the property disableAutoFocus but i'm setting "true" and my modal still have this blue border:
<Modal
disableAutoFocus="true"
aria-labelledby="transition-modal-title"
aria-describedby="transition-modal-description"
className={classes.modal}
open={open}
onClose={handleClose}
closeAfterTransition
BackdropComponent={Backdrop}
BackdropProps={{
timeout: 500,
}}
>
How i can remove this?
Add a class to modal, say egClass and set:
.egClass:focus {
outline: none !important;
}
const styles = {
inkbar: {
'&:after': {
backgroundColor: 'red',
height: '2px'
}
},
underline:{
'&:before':{
height:'2px',
backgroundColor:'green'
}
}
};
<Select
fullWidth
value={this.props.value}
onChange={this.props.onChange}
input={
<Input
classes={{
inkbar:this.props.classes.inkbar,
underline:this.props.classes.underline}}
/>
}
>
{this.props.children}
</Select>)
But when I check code with react tool, I found the classes of <Input> component did not change. Does anyone know how to change the color of inkbar and underline in <Select> component?
I use Material-ui v1.0.0-beta
I have soloved by setting className. But I still want to know why changing classes does not work.
instead of classes use className , for more information checkout this link
I'm currently facing a problem with react-toolbox-checkboxes https://github.com/react-toolbox/react-toolbox/tree/dev/components/checkbox while trying to display them inline like this:
But all I can do is displaying them like this:
Code looks like this:
<Checkbox
checked={this.state.checkboxes[0].task}
label={t('search:instance_template.task')}
onChange={() => {
this.handleCheckboxChange(0, 'task')
}}
/>
Styles like this:
input[type="checkbox"]{
display: inline-block;
}
The checkboxes does receive classes and attributes but attributes like "display: inline-block" don't have any effect onto them. Any ideas? Thanks!
[Reading Purposes] Linking two pages as well that will help on how each style works. Flexbox, CSSFlexbox
Sample related to question.
Based on the comment of #Hash this is the result:
<div id="instanceCheckboxes" style={{display: 'inline-flex', flexDirection: 'row'}}>
<Checkbox
checked={this.state.checkboxes[0].task}
label={t('search:instance_template.task')}
onChange={() => {
this.handleCheckboxChange(0, 'task')
}}
/>
...
</div>
It wasn't necessary to style the checkboxes directly. That's the result:
objective
I have a div that I want to make act like a tooltip with reactjs.
HTML
<div>on hover here we will show the tooltip</div>
<div>
<div class="tooltip_custom">this is the tooltip!!</div>
</div>
I am used to angularjs using the ng-show with a condition on the <div> , I was wondering if there is such binding in reactjs , or else how can I do this functionality ?
Thanks
You can make your component to return the following markup
return (
<div>
<div onMouseOver={this.handleMouseIn.bind(this)} onMouseOut={this.handleMouseOut.bind(this)}>on hover here we will show the tooltip</div>
<div>
<div style={tooltipStyle}>this is the tooltip!!</div>
</div>
</div>
);
Where tooltipStyle is assigned like this:
const tooltipStyle = {
display: this.state.hover ? 'block' : 'none'
}
So tooltip depends on component state, now in handleMouseIn and handleMouseOut you need to change component state to make tooltip visible.
handleMouseIn() {
this.setState({ hover: true })
}
handleMouseOut() {
this.setState({ hover: false })
}
Here is working example.
You can start diving in React with this article: Thinking in React.
One option is just to do it in CSS. It's not quite as flexible, but with markup like:
<div className="tooltip-on-hover">Hover here</div>
<div className="tooltip">This is the tooltip</div>
You could do:
.tooltip {
...
visibility: hidden; /* Or display: none, depending on how you want it to behave */
}
.tooltip-on-hover:hover + .tooltip { /* Uses the adjacent sibling selector */
visibility: visible; /* Or display: block */
}
Example:
.tooltip { display: none; }
.tooltip-on-hover:hover + .tooltip { display: block; }
<div class="tooltip-on-hover">Hover here</div>
<div class="tooltip">This is the tooltip</div>
You could also nest the tooltip inside the element so you could use a normal descendant selector like .tooltip-on-hover:hover .tooltip. You could even use a ::before or ::after pseudo-element, there are guides around on how to do this.
I think whatever you want to show as tooltip, just add that to the "title" of the div where you want to show it.
Eg:
<div title="I am the tooltip text">I am the div where you should hover</div>
But if its a custom designed div then go as the answers given before.
Install npm package:
npm install react-tooltip
Usage:
import ReactTooltip from "react-tooltip";
<div data-tip="msg to show" data-for='toolTip1' data-place='top'>Tooltip</div>
<ReactTooltip id="toolTip1" />
You can also use React Mapple ToolTip which is easy to use and customize and also comes with predefined themes.
Disclaimer: I am the author of this library
reactjs-mappletooltip
You can use react-tooltip package. Super easy to use and handy also.
Installation: npm i react-tootip.
Example:
1. import it :
import ReactTooltip from "react-tooltip"
Include it in your component:
<div className="createContent">
**<ReactTooltip />**
<div className="contentPlaceholder">
add tool tip to your button/div or any element: data-tip="add tooltip message"
<button className="addSection" data-tip="add tooltip message" onClick={() => this.onAddChild()}>+</button>
package url: https://www.npmjs.com/package/react-tooltip
import Tooltip from "#material-ui/core/Tooltip";
const HtmlTooltip = withStyles((theme) => ({
tooltip: {
backgroundColor: 'rgba(255,250,228)',
color: 'rgba(0, 0, 0, 0.87)',
maxWidth: 400,
fontSize: theme.typography.pxToRem(12),
border: '1px solid #dadde9',
},
}))(Tooltip);
headerName: 'FEEDBACK',
field: "remarks",
flex: 0.30,
renderCell: (params: GridCellParams) => (
<Grid>
<HtmlTooltip title={params.value} placement="bottom">
<Typography style={{ color: "inherit", cursor: "pointer" }}>{params.value}</Typography>
</HtmlTooltip>
</Grid>
)
In case, if you are using react-bootstrap in your project, then use https://react-bootstrap.github.io/components/overlays/ Overlay with the tooltip.
MouseEnter and MoverLeave need to be used though.
<OverlayTrigger
placement="right"
delay={{ show: 250, hide: 400 }}
overlay={renderTooltip}>
<div>on hover here we will show the tooltip</div>
</OverlayTrigger>