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 | - | StringFunc | "div" | No |
| baseClass | - | String | "fade" | No |
| baseClassActive | - | String | "show" | No |
| className | - | String | - | No |
| innerRef | - | ObjectStringFunc | - | No |
| children | - | Array[Node]Node | - | No |
| timeout | - | - | TIMEOUT.FADE | No |
| appear | - | - | true | No |
| enter | - | - | true | No |
| exit | - | - | true | No |
| in | - | - | true | No |