I'm using a library. Once I add the component, I don't have direct access to an element with the class "marquee". But I need to add a ref to it like so: Is there anyway I can do this?
<div className="marquee-container">
<div className="marquee" ref={needARefHere}>
<img />
<img />
</div>
</div>
I call this in my code:
<Marquee />
Related
How to add anchor tag in the string passing to checkbox in react
Snippet like
<Checkbox
label="I have read the Terms and condition and agreed it"
/>
Note- there can be more than one tags inside string like <u></u> and many more.
I don't want to create any other component for it
You can do this way:
<Checkbox
label={
<div>
<span>I accept the </span>
<Link to={'/terms'}>terms of use</Link>
<span> and </span>
<Link to={'/privacy'}>privacy policy</Link>
</div>
}
/>
Hi I am trying to detect when a div is clicked that is nested inside of a container.
the goal is to extract the src for an image as a variable.
I want the path to the image
Would this work ?
<div className = "container">
<div onClick{divClicked()} className="column">
<img alt="" src={props.gif} className="ui image" />
</div>
</div>
divClicked() {
console.log(props.gif)
}
You cannot set an onclick like that.
<div onClick={divClicked} className="column">
this code should work if the divClicked function is in the same context.
If this function is a member of a class, you might want to use this.divClicked
Additionally if you want to pass parameters to the function you can use arrow functions to do this.
<div onClick={()=>divClicked(someParam)} className="column">
I use the third-party component named "slider" (rc-slider). I need to add an additional element inside the slider slider (div class = "rc-slider-handle").
<div class="rc-slider">
<div class="rc-slider-rail" style="..."></div>
<div class="rc-slider-track" style="..."></div>
<div class="rc-slider-step"></div>
<div role="slider" tabindex="0" ... class="rc-slider-handle" style="...">
// new element should be added here
</div>
<div class="rc-slider-mark"></div>
</div>
Using from my react component:
<Slider
min={...}
max={...}
value={...}
onChange={...}
/>
According to rc-slider docs, you're able to pass a handle prop:
<Slider
min={...}
max={...}
value={...}
onChange={...}
handle={() => <div className="rc-slider-handle" />}
/>
I am new to React and am trying to get up to speed on a few basic concepts, trying to shoehorn it into an existing application (with the intention of slowly converting the entire app into React). So this may be a vary basic question.
I am converting my dialogs first (my app has a bunch of bootstrap modal dialogs), so I am using react-modal library to create these dialogs. What I would like to do is make the outer markup for this dialog reusable across all my dialogs. For instance, with this render method:
render() {
return(
<Modal
className="Modal__Bootstrap modal-dialog"
closeTimeoutMS={150}
isOpen={this.state.modalIsOpen}
onRequestClose={this.handleModalCloseRequest}
>
<div className="modal-content">
<div className="modal-header">
<button type="button" className="close" onClick={this.handleModalCloseRequest}>
<span aria-hidden="true">×</span>
<span className="sr-only">Close</span>
</button>
*******INSERT HEADER COMPONENT*******
</div>
<div className="modal-body">
*******INSERT BODY COMPONENT*******
</div>
<div className="modal-footer">
<button type="button" className="btn btn-default" onClick={this.handleModalCloseRequest}>Cancel</button>
*******INSERT ADDITIONAL FOOTER BUTTONS COMPONENT*******
</div>
</div>
</Modal>
);
}
I would like to have the lines that start with the ******** to be variable components that are appropriate (and different) for each dialog.
Obviously, for each dialog, I could just copy and paste this render method into that dialog's class and have hard coded components for that dialog. Something like (for the body):
<div className="modal-body">
<DialogABody />
</div>
and:
<div className="modal-body">
<DialogBBody />
</div>
But if I do that, I am then duplicating all the markup for the dialog "chrome" in react.
Essentially, I need some sort of dynamic component?
Is this possible?
on your modal react class you want to do this
class Modal extends React.Component {
render() {
return (
<div>
{this.props.header ? <HeaderComponent text={this.props.header} /> : null }
{this.props.children}
{this.props.footer ? <FooterComponent text={this.props.footer} /> : null }
</div>
}
}
then when calling this pass your props
<Modal
className="Modal__Bootstrap modal-dialog"
closeTimeoutMS={150}
isOpen={this.state.modalIsOpen}
onRequestClose={this.handleModalCloseRequest}
header="My Header"
footer="My Footer"
>
as for the body component part you should pass that as a prop to this dialog class when calling it.
instead of this:
<div className="modal-body">
<DialogABody />
</div>
you should have this:
<div className="modal-body">
{this.props.dialogComponent}
</div>
which gets passed through on the parent to this class
Call your model dialog with the wanted components as props.
<model header={headerComponent} body={bodyComponent}/>
In model render just put {this.props.header} and so on.
for one child component you could simply use this.props.children, however, as you have 3 components, you need to put them into separate props:
<DialogBody header={<div>header</div>} body={<div>body</div>} footer={<div>footer</div>}/>
I have a simple ng-repeat generating image divs. I want them to come out in rows of 4 instead of one long vertical list. How can I do this?
<div ng-repeat="artist in artists">
<div>
<h3> {({ artist.fields.title })} </h3>
<img src="{({ artist.fields.link })}" />
</div>
</div>
I believe you want to do something like this
<div style="width:800px;">
<div ng-repeat="artist in artists" style="width:200px;float:left;">
<div>
<h3> {({ artist.fields.title })} </h3>
<img src="{({ artist.fields.link })}" />
</div>
</div>
</div>
By having a container with a fixed width, and having each element inside be 1/4 of that width you can achieve what you want.
Of course, inline styles shouldn't be used in real code :)
You can use the $index property to add a tag every 4th item. Then use some CSS to display items as desired:
<div ng-repeat="artist in artists">
<div class="someClass">
<h3> {({ artist.fields.title })} </h3>
<img src="{({ artist.fields.link })}" />
</div>
<br ng-if="artist.$index % 4 == 0" />
</div>
One way is to use css properties. attach a class to the div with a float:left attribute, and insert a br tag after every 4th div
I guess you are using bootstrap?
If yes, this thread could do a help:
Bootstrap's grid columns number per row
doc for bootstrap grid layout:
http://getbootstrap.com/css/#grid-example-mixed