Shards React
DocumentationThe Fade
component allows you to easily fade in and out content and is powered by react-transition-group.
import React from "react";
import { Fade, Button } from "shards-react";
export default class BasicFadeExample extends React.Component {
constructor(props) {
super(props);
this.toggle = this.toggle.bind(this);
this.state = {
visible: true
};
}
toggle() {
this.setState({
visible: !this.state.visible
});
}
render() {
return (
<div>
<Button onClick={this.toggle} className="mb-2">
Toggle Fade
</Button>
<Fade in={this.state.visible}>
Etiam semper convallis tortor, in euismod orci vehicula sit amet.
</Fade>
</div>
);
}
}
The following props are available for the Fade
component.
Prop | Description | Type | Default | Required |
---|---|---|---|---|
tag | - | String Func | "div" | No |
baseClass | - | String | "fade" | No |
baseClassActive | - | String | "show" | No |
className | - | String | - | No |
innerRef | - | Object String Func | - | No |
children | - | Array[Node] Node | - | No |
timeout | - | - | TIMEOUT.FADE | No |
appear | - | - | true | No |
enter | - | - | true | No |
exit | - | - | true | No |
in | - | - | true | No |