I am new to react and I am trying to slide down my div element using react-spring. However, the slide-down effect is not working. I saw this in a tutorial and tried to implement it however it's not working.
Here is my code:
<Spring from={{ opacity: 0, marginTop: -500 }} to={{ opacity: 1, marginTop: 0 }}>
{props => (
<div style={props}>
<div style={{ display: cost ? 'block' : 'none' }}>
<Card className="calculation shadow">
<CardBody>
<div style={{ borderTop: '2px solid #000 ', marginLeft: 20, marginRight: 20
}}></div>
<Row style={{ float: 'right', marginBottom: '1rem' }}>
<span style={{ float: 'right' }}>
<FontAwesomeIcon icon={faClipboardList} onClick={this.handler} />
</span>
</Row>
<div style={{ borderTop: '2px solid #000 ', marginLeft: 20, marginRight: 20
}}></div>
</CardBody>
</Card>
</div>
</div>
)}
</Spring>
How do I make it work so that the div component slides down when clicking a button? Please help
You're not passing the animated styles to an animated.div. Which means the props from the spring will not animate your component.
Also since you're trigger the animation on a click. I would set the animated values – opacity & marginTop as state variables. Then you on the onClick handler you can update the state triggering a change in the animation.
See the Spring docs here
And for more information, here's a codesandbox
I found the solution everything is fine no animated div required I had to just change the version of react- spring to npm i react-spring#8.0.20 and it works
Related
I have a couple of React Bootstrap Tabs within a TabContainer as shown below. My issue now is that when I set the maxHeight of the Tab.Content and it gets exceeded, the content is going under the Nav which is weird.
Here is my code:
<Tab.Container
activeKey={activeTab}
onSelect={(e) => {
setActiveTab(e);
}}
>
<Row sm={1} className={'px-3'}>
<Nav variant="tabs" className="border-bottom-0 flex-row">
{
// ...tabsGoHere
}
</Nav>
</Row>
<Divider />
<Tab.Content
className='p-4'
style={{
maxHeight: 600, //This is causing the Tab content to display under the Tabs instead of below it, once the height exceeds 600.
overflowY: 'scroll',
display: 'flex',
alignItems: 'center',
justifyContent: 'center'
}}>
<Tab.Pane eventKey={activeTab}>
{/* ...Content */}
</Tab.Pane>
</Tab.Content>
</Tab.Container>
How can I ensure the Tab.Content is always displaying below the Tabs and not under them no matter the height of the Tab.Content
Thank you
I have a table with a custom right side control, where the user can set the columns visibility as well as reorder them. Upon clicking a button, the control expands and the user can now make changes. The basic functionality is there. I am now trying to make the transition a smoother and that is where I am failing.
Here is the minimal markup that is rendered:
<div
style={{
display: "flex",
justifyContent: "flex-start"
}}
>
<div style={{ flex: "auto" }}>
<Table columns={columns} dataSource={data} pagination={"false"} />
</div>
<div
style={{
flex: hasExpandedControls ? "2 1 1" : "0 0 1",
transition: "all 500ms ease-in-out"
}}
>
<div
style={{
display: "flex"
}}
>
<div>
{hasExpandedControls ? (
<Tree
checkable
draggable
treeData={columnsTree}
checkedKeys={visibleColumns.map((col) => col.key)}
onCheck={handleCheck}
onDrop={handleDrop}
style={{ marginRight: "0.5em" }}
/>
) : null}
</div>
<div>
<div style={{ padding: "50% 0", height: 0, width: "40px" }}>
<Button
onClick={() => setHasExpandedControls((prev) => !prev)}
style={{
marginLeft: ".5em",
display: "block",
transformOrigin: "top left",
// transform: 'rotate(-90deg) translate(-100%)',
transform: "rotate(90deg) translate(0, -100%)",
marginTop: "-50%"
}}
>
Spalten
</Button>
</div>
</div>
</div>
</div>
Clicking the button triggers a state change, which causes the Tree to be rendered and in this instance the div 'snaps' to its full width. I am failing to accomplish my goal using css transitions, so I was wondering if there was an easier way to accomplish my goal.
I've tried setting the transition on various wrapping elements and all elements, but the 'snap' into existence remains.
Codepen to reproduce: https://codesandbox.io/s/basic-usage-antd-4-17-3-forked-yq2u7?file=/index.jshttps://codesandbox.io/s/gu4hs
Now i have used state hook to hide the Form when the page loads. And upon the click or toggle of the radio I'm able to show the Form, But if i toggle the radio again, the form is not hiding.
This is what i have implemented:
const WelcomeTab = () => {
const [toggle, settoggle] = useState(false);
return (
<React.Fragment>
<Tab.Pane
style={{
borderRadius: '7px',
padding: '30px',
}}
attached={false}
>
<Grid>
<Grid.Row>
<Grid.Column floated="left" width={8}>
<Header
style={{
fontSize: '18px',
fontFamily: 'Nunito-Regular',
color: '#4F4F4F',
}}
>
Welcome Screen
</Header>
</Grid.Column>
<Grid.Column floated="right" width={4}>
<Header
as="h4"
style={{
display: 'flex',
justifyContent: 'space-around',
marginLeft: '30px',
}}
>
Customize
<Radio toggle onChange={() => settoggle({ toggle: !toggle })} />
</Header>
</Grid.Column>
</Grid.Row>
</Grid>
{toggle ? (
<Form style={{ paddingTop: '20px' }}>
<Form.Field>
<label style={lableStyle}>Title</label>
<input style={{ marginBottom: '20px' }} />
<label style={lableStyle}>Message</label>
<TextArea />
</Form.Field>
</Form>
) : null}
</Tab.Pane>
</React.Fragment>
);
};
const lableStyle = {
fontFamily: 'Nunito-Regular',
fontWeight: 400,
color: '#4F4F4F',
fontSize: '15px',
display: 'inline-block',
marginBottom: '10px',
};
export default WelcomeTab;
try to add useEffect hook along with change like below,
you no longer need to {} this is old syntax of setState, using hooks we directly make the changes, hope this helps
useEffect(()=>{},[toggle])
replace this wrong syntax code, i can see its not json its boolean value
<Radio toggle onChange={()=>settoggle({toggle: !toggle})}/>
as this is old syntax not work with hooks, try to implment this instead,
<Radio toggle onChange={()=>settoggle(!toggle)}/>
Description
I'm trying to implement some parallax animation using react-spring, but I'm not able to find a way to space the containers in a responsive / uniform way.
Reproducible snippet
Here I made a snippet which contains a basic parallax effect animating some divs on scroll:
<Parallax pages={5}>
<ParallaxLayer offset={0} speed={0.4} style={{ height: "auto" }}>
<div className="box" />
</ParallaxLayer>
<ParallaxLayer offset={0.9} speed={0.6} style={{ height: "auto" }}>
<div className="box" />
</ParallaxLayer>
<ParallaxLayer offset={1.1} speed={0.8} style={{ height: "auto" }}>
<div className="box" />
</ParallaxLayer>
<ParallaxLayer offset={1.9} speed={1} style={{ height: "auto" }}>
<div className="box" />
</ParallaxLayer>
<ParallaxLayer offset={2} speed={1.2} style={{ height: "auto" }}>
<div className="box" />
</ParallaxLayer>
</Parallax>
Problem
Having the layers with heights based on their content make them not responsive, as each layer is specifically starting from the specified offset position.
Conclusion
I would guess that works if the layers are being set with a specified viewport height, but is that really the only way?
Or am I perhaps misinterpreting the usage of this component?
I have created a React Bootstrap Card with four columns as per the grid system layout. I'm not the greatest at styling or CSS but I would like the text to be wrapped if it is too long- so for instance, in the image below, "BosniaAndHerzegovina" has pushed one of the columns to the bottom of the card, when I really want the text to be wrapped according to the column size.
Here is my JSX for the first column:
return (
<Card style={{ width: '25rem' }}>
<Card.Body>
<Row>
<Col sm='auto'>
<Row style={{ marginTop: '5px', marginBottom: '2.5px' }}>
{teams[0].name}
</Row>
<Row style={{ marginTop: '5px', marginBottom: '2.5px' }}>
{teams[1].name}
</Row>
<Row style={{ marginTop: '5px', marginBottom: '2.5px' }}>
{teams[2].name}
</Row>
<Row style={{ marginTop: '5px', marginBottom: '2.5px' }}>
{teams[3].name}
</Row>
</Col>
.
.
.
How do I get the text to wrap around a fixed column width?
to break long texts into multiple lines you can use the css property word-break passing break-all:
word-break: break-all;
.box {
width: 50px;
word-break: break-all;
}
<div class="box">myreallylongsentenceshouldbebrokeninmultiplelines</div>