React Widgets
| Version | v1.0.0-beta11 |
|---|
Introduction
This package provides templates that significantly reduce CSS development work in a React environment, while enhancing readability and maintainability by consolidating style definitions. It fosters a more suitable development environment for Declarative UI. Additionally, it includes widgets designed to improve performance.
Note
Other widgets will be added sequentially in the README.md, and detailed usage will be covered through the related website once this package is officially released.
Consider integrating not only business logic but also design logic into script code, See Also, If you want the change-log by version for this package. refer to Change Log for details.
<Scrollable.Horizontal>
<Row gap="5px" padding="15px">...[children]Row>
Scrollable.Horizontal>
)
Preview
The image below is a simple use gif of Quark Icons and a website created using @web-package/react-widgets and its extension, @web-package/react-widgets-router.
Usage
How to make responsive animated size?
Interestingly, even when wrapped with this widget, it does not impact the layout calculations of existing child elements. This is because the React widget package is designed to assist with layout calculations while striving to minimize any impact on the existing layout.
<AnimatedSize duration="0.3s">
<Box>Hello, World 1Box>
<Box>Hello, World 2Box>
<Box>Hello, World 3Box>
AnimatedSize>
)
Simple Preview
How to make responsive folding animation?
You can be using the AnimatedFoldable.Vertical or AnimatedFoldable.Horizontal widgets to resolve it.
const [visible, setVisible] = useState(true);
return (<>
<button onClick={() => setVisible(!visible)}>Foldbutton>
{ /* or using AnimatedFoldable.Vertical widget */ }
<AnimatedFoldable.Horizontal visible={visible} duration="0.3s">
<Row>
<Box>Hello, World 1Box>
<Box>Hello, World 2Box>
<Box>Hello, World 3Box>
Row>
AnimatedFoldable.Horizontal>
>)
}
Simple Preview
How to animate child component changes?
If you want to animate dynamic changes in a child component (e.g. when transitioning out of a loading screen or in other similar cases), you can easily achieve this by simply using the AnimatedTransition widget.
See Also, You don't need to forward the
valueproperty value by unconditionally, but it helps define more clearly whether the child component state has changed.
const [count, setCount] = useState(0);
// You can be using like this:
//
// { // when using CSS animation
// fadeIn: "keyframe-name"
// fadeOut: "keyframe-name"
// }
return (
<Column size="100%">
<button onClick={() => setCount(count + 1)}>Count Upbutton>
<AnimatedTransition value={count} animation={{
duration: "0.3s",
fadeIn: {from: {opacity: 0}, to: {opacity: 1}},
fadeOut: {from: {opacity: 1}, to: {opacity: 0}}
}}>
<Box>Hello, World! {count}Box>
AnimatedTransition>
Column>
)
}
Simple Preview
fadeIn: {from: {opacity: 0, transform: "translateY(100%)"}, to: {opacity: 1, transform: ""}},
fadeOut: {from: {opacity: 1, transform: ""}, to: {opacity: 0, transform: "translateY(-100%)"}}
How to make Tab Navigation?
You can be using the TabNavigation.Vertical or TabNavigation.Horizontal widgets to resolve it.
const [index, setIndex] = useState(0);
return (
<TabNavigation.Horizontal index={index} gap="15px" duration="0.5s">
<h1 onClick={() => setIndex(0)}>Item 1h1>
<h1 onClick={() => setIndex(1)}>Item 2h1>
<h1 onClick={() => setIndex(2)}>Item 3h1>
TabNavigation.Horizontal>
)
}
Simple Preview
How to make responsive grid?
You can be using the ConstraintBuilder with Grid widgets to resolve it.
<ConstraintBuilder<number>
constraints={[
new Constraint(1000, Infinity, 3),
new Constraint(600, 1000, 2),
new Constraint(-Infinity, 600, 1)
]}
/* You need to set this option accordingly according to the situation. */
usememo={true}
builder={(value: number) => {
return (
<Grid gap="5px" rowCount={value}>
<Text>1Text>
<Text maxLine={1}>2Text>
<Text type={TextType.h1} maxLine={1}>3Text>
<Text type={TextType.h2} maxLine={2}>4Text>
<Text type={TextType.h3} maxLine={3}>5Text>
Grid>
);
}
} />
)