https://github.com/react-widgets/react_widgets
This is package that provides templates that can significantly reduce CSS development works in a react development environment.
https://github.com/react-widgets/react_widgets
layout react react-package template widget
Last synced: 7 months ago
JSON representation
This is package that provides templates that can significantly reduce CSS development works in a react development environment.
- Host: GitHub
- URL: https://github.com/react-widgets/react_widgets
- Owner: react-widgets
- License: apache-2.0
- Created: 2024-04-05T02:38:09.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2024-10-28T12:14:08.000Z (about 1 year ago)
- Last Synced: 2024-10-28T13:35:42.508Z (about 1 year ago)
- Topics: layout, react, react-package, template, widget
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/@web-package/react-widgets
- Size: 697 KB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
React Widgets
Version
v1.0.0-beta11
You need to learn more about the react-widgets-router package that is the extension of this package!
# 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](CHANGELOG.md) for details.
```tsx
return Hello, World
```
```tsx
return (
...[children]
)
```
# Preview
The image below is a simple use gif of [Quark Icons](https://quarkicons.com/) 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.
```tsx
return (
Hello, World 1
Hello, World 2
Hello, World 3
)
```
### Simple Preview
## How to make responsive folding animation?
You can be using the `AnimatedFoldable.Vertical` or `AnimatedFoldable.Horizontal` widgets to resolve it.
```tsx
function ExampleComponent() {
const [visible, setVisible] = useState(true);
return (<>
setVisible(!visible)}>Fold
{ /* or using AnimatedFoldable.Vertical widget */ }
Hello, World 1
Hello, World 2
Hello, World 3
>)
}
```
### 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 `value` property value by unconditionally, but it helps define more clearly whether the child component state has changed.
```tsx
export default function ExampleComponent() {
const [count, setCount] = useState(0);
// You can be using like this:
//
// { // when using CSS animation
// fadeIn: "keyframe-name"
// fadeOut: "keyframe-name"
// }
return (
setCount(count + 1)}>Count Up
Hello, World! {count}
)
}
```
### 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.
```tsx
export default function ExampleComponent() {
const [index, setIndex] = useState(0);
return (
setIndex(0)}>Item 1
setIndex(1)}>Item 2
setIndex(2)}>Item 3
)
}
```
### Simple Preview
## How to make responsive grid?
You can be using the `ConstraintBuilder` with `Grid` widgets to resolve it.
```tsx
return (
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 (
1
2
3
4
5
);
}
} />
)
```