To gain knowledge in reason and reason-react, I am currently developing a straightforward “Things 2 Do” application (view source code on GitHub).
I have implemented a TodoItem component that should display with a strike-through style when the task is marked as completed.
My approach involves creating a record with different styles resembling CSS classes, one for the base style and another for completed items.
type style = {
root: ReactDOMRe.style,
completed: ReactDOMRe.style
};
let styles = {
root: ReactDOMRe.Style.make(), /* define root styles here */
completed: ReactDOMRe.Style.make(~opacity="0.666", ~textDecoration="line-through", ())
};
If the completed prop is set to true, I merge the base style with the completed style; otherwise, I only use the base style as shown below:
let style = styles.root;
let style = item.completed ? ReactDOMRe.Style.combine(style, styles.completed) : style;
Although this method works, it feels a bit cumbersome. Therefore, I am curious if there is a more elegant solution, like leveraging variants and switch statements?
What is the preferred way to define styles for a Reason-React component that are dependent on props?
Below is the complete code snippet of my component:
type item = {
id: int,
title: string,
completed: bool
};
type style = {
root: ReactDOMRe.style,
completed: ReactDOMRe.style
};
let str = ReasonReact.stringToElement;
let component = ReasonReact.statelessComponent("TodoItem");
let styles = {
root: ReactDOMRe.Style.make(), /* define root styles here */
completed: ReactDOMRe.Style.make(~opacity="0.666", ~textDecoration="line-through", ())
};
let make = (~item: item, ~onToggle, _) => {
...component,
render: (_) => {
let style = styles.root;
let style = item.completed ? ReactDOMRe.Style.combine(style, styles.completed) : style;
<div style>
<input
_type="checkbox"
onChange=((_) => onToggle())
checked=(Js.Boolean.to_js_boolean(item.completed))
/>
<label> (str(item.title)) </label>
</div>
}
};