I made a custom component as an intermediate component for a logger. I need it to display notifications that fade-out in 4 seconds for instance. I need an example of a custom component that once has its model updated will display some text for the 4 seconds then it fades out with css. I tried to adapt this but having a hard time to make it work reactjs - How to wait and fade an element out? - Stack Overflow
managed to play longer with it
<style>
@import url('https://rsms.me/inter/inter.css');
html { font-family: 'Inter', sans-serif; }
@supports (font-variation-settings: normal) {
html { font-family: 'Inter var', sans-serif; }
}
* {
font-family: 'Inter', sans-serif;
}
body {
margin: 0;
}
#react {
height: 100%;
width: 100%;
}
.card {
min-width: 0;
min-height: 120px;
display: flex;
flex-direction: column;
justify-content: center;
padding: 12px 24px;
border-radius: 4px;
border: 1px solid #cccccc;
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
background-color: var(--background-surface);
}
.title-container {
display: flex;
justify-content: space-between;
align-items: center;
line-height: 24px;
}
.title {
font-size: 18px;
font-weight: 700;
text-overflow: ellipsis;
white-space: nowrap;
}
.docs-link {
font-size: 12px;
font-weight: 500;
color: #b062bc;
text-decoration: none;
}
.docs-link:hover {
color: #9846a4;
}
.content {
margin-top: 4px;
font-size: 12px;
line-height: 18px;
font-weight: 400;
color: #777777;
}
.button-container {
display: flex;
align-items: center;
gap: 8px;
margin-top: 12px;
}
.button {
border: none;
border-radius: 4px;
padding: 8px 16px;
font-weight: 500;
font-size: 12px;
cursor: pointer;
outline: none;
appearance: none;
user-select: auto;
}
.button--main {
background-color: #b062bc;
color: #ffffff;
}
.button--main:hover {
background-color: #9846a4;
}
.button--secondary {
color: #b062bc;
background-color: var(--background-surface);
border: 1px solid #b062bc;
}
.button--secondary:hover {
color: #9846a4;
border: 1px solid #9846a4;
}
.alert-shown {
opacity: 1;
transition: all 250ms linear;
}
.alert-hidden {
opacity: 0;
transition: all 250ms linear 4.5s;
}
</style>
<!-- You can add any HTML/CSS/JS here. UMD versions are required.
Keep in mind that Custom Components are sensitive to bundle sizes, so try using a
custom implementation when possible. -->
<script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<div id="react"></div>
<script type="text/babel">
function Fade(props) {
const [isShowingAlert, setShowingAlert] = React.useState(null);
React.useEffect(() => {
setShowingAlert(true);
setTimeout(() => {
setShowingAlert(false)
}, 200);
}, [props.children]);
return (
<div>
<div
className={`alert alert-success ${isShowingAlert ? 'alert-shown' : 'alert-hidden'}`} >
{props.children}
</div>
</div>
);
}
</script>
<script type="text/babel">
const MyCustomComponent = ({ triggerQuery, model, modelUpdate }) => (
<div className="card">
<div className="title-container">
<div className="title">Custom component</div>
<a href="https://docs.retool.com/apps/web/guides/components/custom" className="docs-link">View docs</a>
</div>
<div className="content">
{/* The text below is dynamic and specified by the model. */}
<Fade>{model.displayText}</Fade>
</div>
<div className="button-container">
{/* This button updates the model when clicked. */}
<button
className="button button--secondary"
onClick={() => modelUpdate({ displayText: 'The body of this text references "model.displayText", which just changed!' })}
>
Update model
</button>
</div>
</div>
)
// This is the entrypoint for the React component.
const ConnectedComponent = Retool.connectReactComponent(MyCustomComponent)
const container = document.getElementById('react')
const root = ReactDOM.createRoot(container)
root.render(<ConnectedComponent />)
</script>
Thanks for sharing your solution back here so others can learn how to accomplish fading out text with a custom component! . Would you be open to sharing a screenshot or gif showing the behavior in action?