Auto fill an image template with react? - reactjs

Question

I'm currently using react to create a student portal. A functionality that we want to add is to have customized awards for students when they complete a certain milestone. Something like this https://www.pinterest.com/pin/460563499365843175/. We have our own template that we want to follow, where I need to fill in the student's name and achievement, which is obviously different for everyone. Is there any component/api I can use to do this through react? I'm open to all ideas and suggestions. Thanks!

Answer 1

If I understand you correctly, you will want to create a custom component per award type, with images, boiler-plate text and input fields. You can pass in to these components the props you will need e.g. Name, Date etc. You can then render this component only when necessary, passing in the individual student's details, to presented in the input fields. You can use CSS to style the component however you'd like, e.g. removing top/left/right borders around fields etc.
There are no bespoke components like this I'm aware of, but it wouldn't be too difficult to create one yourself.
const Award = ({type, name}) => (
<div class="award">
<div class="header">Award of Excellence</div>
<div class="type">
<label htmlFor="type">for</label>
<input type="text" id="type" name="type" value={type} />
</div>
<div class="recipient">
<label htmlFor="recipient">Awarded to</label>
<input type="text" id="recipient" name="recipient" value={name} />
</div>
<div class="footer">
<div>
<input type="text" id="date" name="date" value={new Date()} />
<label htmlFor="date">Date</label>
</div>
<img class="medal" src="https://www.diggerland.com/wp-content/uploads/2015/01/Gold-medal1.png" alt="medal" />
<div>
<input type="text" id="signature" name="signature" value="Professor Plum" />
<label htmlFor="signature">Signature</label>
</div>
</div>
</div>
);
ReactDOM.render(<Award type="1st Award" name="John Smith" />, document.body);
.award {
display: flex;
flex-direction: column;
align-items: center;
}
.type, .recipient, .footer > * {
display: flex;
flex-direction: column;
align-items: center;
padding: 1rem;
font-family: "luminary";
}
.footer {
display: flex;
padding: 2rem;
}
.medal {
height: 4rem;
}
input {
border-width: 0 0 0.1rem;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>