@knovator/pagecreator 0.7.0 → 0.9.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +24 -18
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -80,11 +80,11 @@
|
|
|
80
80
|
<!-- GETTING STARTED -->
|
|
81
81
|
## Getting Started
|
|
82
82
|
|
|
83
|
-
|
|
83
|
+
`@knovator/pagecreator` is designed to be used in ReactJS/NextJS project.
|
|
84
84
|
|
|
85
85
|
### Prerequisites
|
|
86
86
|
|
|
87
|
-
|
|
87
|
+
Create one reactjs/nextjs application if you don't have one,
|
|
88
88
|
* Project
|
|
89
89
|
```sh
|
|
90
90
|
npx create-react-app my-app
|
|
@@ -94,7 +94,7 @@ We can use `@knovator/pagecreator` in React/Next application, we can create one
|
|
|
94
94
|
|
|
95
95
|
### Installation
|
|
96
96
|
|
|
97
|
-
1.
|
|
97
|
+
1. Add pagecreator package
|
|
98
98
|
```sh
|
|
99
99
|
npm install @knovator/pagecreator
|
|
100
100
|
# or
|
|
@@ -119,23 +119,27 @@ import { Widget } from '@knovator/pagecreator';
|
|
|
119
119
|
```
|
|
120
120
|
**Props**
|
|
121
121
|
- `widgetData`
|
|
122
|
-
|
|
122
|
+
- [widgetData](data-formats.md#widgetdata)
|
|
123
123
|
- `imageBaseUrl`
|
|
124
|
-
|
|
124
|
+
- baseUrl to append before image urls
|
|
125
125
|
- `formatItem` (optional): `(item: ItemData) => JSX.Element`
|
|
126
|
-
|
|
126
|
+
- Customize look of Items
|
|
127
127
|
- `onClick` (optional): `(item: ItemData) => void;`
|
|
128
|
-
|
|
128
|
+
- OnItem click handler
|
|
129
129
|
- `hideTitle` (optional): boolean;
|
|
130
|
-
|
|
130
|
+
- Do not show the title if true
|
|
131
131
|
- `settings` (optional): [Swiper props](https://swiperjs.com/swiper-api#parameters)
|
|
132
|
-
|
|
132
|
+
- Carousel settings to apply for carousel widget
|
|
133
133
|
- `className` (optional): string
|
|
134
|
-
|
|
134
|
+
- Class name for widget
|
|
135
135
|
- `formatHeader` (optional): `(title: string, data: WidgetData) => string | JSX.Element`
|
|
136
|
-
|
|
136
|
+
- Function to format the widget header
|
|
137
137
|
- `formatFooter` (optional): `(data: WidgetData) => string | JSX.Element`
|
|
138
|
-
|
|
138
|
+
- Function to format the widget footer
|
|
139
|
+
- `formatTabTitle` (optional): `(title: string, collectionData: any[], isActive: boolean) => JSX.Element;`
|
|
140
|
+
- Function to format tab title
|
|
141
|
+
- `itemsContainer` (optional): `(children: JSX.Element) => JSX.Element;`
|
|
142
|
+
- Function to wrap items in widget
|
|
139
143
|
|
|
140
144
|
### Page
|
|
141
145
|
```jsx
|
|
@@ -149,17 +153,19 @@ import { Page } from '@knovator/pagecreator';
|
|
|
149
153
|
```
|
|
150
154
|
**Props**
|
|
151
155
|
- `title` (optional)
|
|
152
|
-
|
|
156
|
+
- Title to show on page
|
|
153
157
|
- `imageBaseUrl`
|
|
154
|
-
|
|
158
|
+
- baseUrl to start prefix image urls
|
|
155
159
|
- `pageData`
|
|
156
|
-
|
|
160
|
+
- [PageData](data-formats.md#pagedata)
|
|
157
161
|
- `formatItem` (optional): `(CODE: string, item: ItemData) => JSX.Element;`
|
|
158
|
-
|
|
162
|
+
- Customize look of Items
|
|
159
163
|
- `onClick` (optional): `(CODE: string, item: ItemData) => JSX.Element;`
|
|
160
|
-
|
|
164
|
+
- On Item click handler
|
|
161
165
|
- `hideWidgetTitles` (optional): boolean
|
|
162
|
-
|
|
166
|
+
- Flag to hide widget titles
|
|
167
|
+
- `formatWidget` (optional): `(item: WidgetData, index: number) => JSX.Element;`
|
|
168
|
+
- Function to format individual widget
|
|
163
169
|
|
|
164
170
|
### getData
|
|
165
171
|
It's possible to fetch data by yourself and pass them to `Widget` or `Page` components, but if you need easy solution you can use `getData` function.
|