);
};
```
### LetSuspense
Implementation inspired by a blog [How to Create a LetSuspense Component in React](https://academind.com/learn/react/a-custom-suspense-component/).
Component that renders a placeholder component, till the condition satisfies for it to display its children. i.e, When condition evaluates `true`, LetSuspense **children** are rendered & when condition evaluates `false`, the **loadingPlaceholder** is rendered **muliplier** number of times.
#### Props table
| Prop Name | Type | Default | Required (or) Optional | Description |
| ------------------ | -------------------------------------------------------- | ----------- | ---------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| condition | `boolean` | `false` | Optional | boolean or expression that evaluates to `true` or `false`. `true` -> render the **children**, `false` -> render **loadingPlaceholder** |
| errorCondition | `boolean` | `false` | Optional | boolean or expression that evaluates to `true` or `false`. `true` -> render the **errorPlaceholder**, `false` -> render **loadingPlaceholder** / **children** based on **condition** |
| loadingPlaceholder | `React.ComponentType` | `undefined` | Required | Component to rendered if loading is true. Constructor of component. i.e, `LoaderComponent` instead of `` |
| multiplier | `number` | `1` | Optional | The number of placeholders to be rendered |
| errorPlaceholder | `React.ReactNode` | `undefined` | Optional | Component to rendered if error occurs. Instance of a component, unlike **loadingPlaceholder**. i.e, `` instead of `Retry` |
| children | React.ReactNodeArray | React.ReactNode | `undefined` | Optional | The actual component(s) that will be rendered when the condition evaluates to `true` |
| initialDelay | `number` | `0` | Optional | Minimum time (in milliseconds) before a component is rendered |
#### Basic usage
```js
// MyComponent.js
// ...
export default ()=>{
const [data, setData] = useState([]);
useEffect( () => {
// ...
fetchData()
// ...
}, [] )
const fetchData = () => {
// api request logic
}
return (
0 }
loadingPlaceholder={ LoaderComponent }
>
{
data.map( each => (
...
) )
}
);
};
```
#### With delay
Useful to show a loding screen event though there is not async dependency, meaning no backend api to hit to fetch the data, but still want to show the loding component for minute amount of time.
```js
// MyComponent.js
// ...
export default () => {
return (
// ...
);
};
```
## Hooks
### useCountRenders
Logs the number of times the component rerendred after mount. Logs only in development environment.
#### Args Table
| Arg Name | Type | Default | Required (or) Optional | Description |
| ------------- | -------- | ----------- | ---------------------- | ---------------------------------------------- |
| componentName | `string` | `undefined` | Required | Name of the component. used in the logs detail |
#### usage
```js
// MyComponent.js
// ...
export default () => {
useCountRenders("MyComponent");
return (
// jsx
);
};
```
### useFetch
React hook for fetching data based on condition and dependency array.
#### Options
| option | Type | Default | Required (or) Optional | Description |
| ----------------- | ------------------------------------------------ | ----------- | ---------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| method | `( ...args: any ) => Promise` | `undefined` | Required | Reference to the function which returns a Promise |
| args | `Parameters` | `undefined` | Required | Arguments to the function refered for "method" |
| dependencies | `any[]` | `[]` | Optional | Refetch based on dependency value change, **useEffect** dependency array |
| normalize | boolean | string | `false` | Optional | normalizes based on the key provided. `true` -> normalizes by "id" (or) `false` -> directly sets data with the response data (or) `"somekey"` -> normalizes by "somekey" |
| onError | `( e: AxiosError ) => void` | `undefined` | Optional | Callback that gets called on api request gets rejected with an error |
| condition | `boolean` | `true` | Optional | Condition to fetch. `true` -> make the api request on fetch Call (or) `false` -> donnot make api request on fetch call |
| defaultData | `any` | `null` | Optional | Default state of **data** |
| transformResponse | `( res: any ) => any` | `undefined` | Required | Transform the response before storing data in the "data" state. Whatever is returned by the function is set to "data". It can also return a **promise**. **_Note:_** if normalize is true (or) "somekey", then normalization is done on object returned |
| onCancelMsg | `string` | `undefined` | Optional | message of the error thrown on request cancel |
| onCancel | `( e: AxiosError | Error ) => void` | `undefined` | Optional | callback which is called when an ongoing request is canceled. **onError** is not called when onCancel is present and request is canceled |
#### Return object
| keys | Type | Default | Description |
| ------- | ------------------------------------------- | --------- | --------------------------------------------------------------------------------------------------------------------------------- |
| fetched | `Fetched` | `"FALSE"` | Tells at what state the api call is in. One of `"FALSE" | "FETCHING" | "ERROR" | "TRUE"` |
| data | `any` | `null` | Response data or normalized response data |
| setData | `React.Dispatch>` | - | Function to manipulate "data" state |
| fetch | `() => void` | - | Function to make the api call. General usecase is to call this function on retry if initial api request fails (`fetched="ERROR"`) |
#### Basic Usage
```js
// books.service.js
// ...
import Client from "./api.service.js";
export default {
getAllBooks() {
return Client.get( "/api/books" );
}
getBookInfo( bookId: number ) {
return Client.get( "api/books", { id: bookId } );
}
// ...other apis
}
```
```js
// MyComponent.js
// ...
import bookService from "./books.service.js";
import { useFetch } from "@ssbdev/react-web-utilities";
import { useParams } from 'react-router-dom';
//...
export default ( props ) => {
const {
fetched: booksFetched,
data: books,
setData: setBooks,
fetch: fetchBooks
} = useFetch( {
method: bookService.getAllBooks,
args: [], // args of the above method
} );
return {
"FALSE":
Waiting...
,
"FETCHING":
Fetching Books...
,
"ERROR": ,
"TRUE": (
{
books.map( book => (
{ book.title }
) );
}
)
}[booksFetched];
};
```
## Factories
### ReduxActionConstants
Constructor that create a set of strings that can be used as Redux Action Types.
#### usage
```js
// books.actions.js
// ...
const BOOKS = new ReduxActionConstants("books");
console.log(BOOKS);
// output
// {
// ENTITY: "BOOKS",
// INSERT: "[BOOKS] INSERT",
// UPDATE: "[BOOKS] UPDATE",
// REMOVE: "[BOOKS] REMOVE",
// BULK_INSERT: "[BOOKS] BULK_INSERT",
// BULK_UPDATE: "[BOOKS] BULK_UPDATE",
// BULK_REMOVE: "[BOOKS] BULK_REMOVE",
// SET: "[BOOKS] SET",
// UNSET: "[BOOKS] UNSET",
// RESET: "[BOOKS] RESET"
// }
const reducer_setBooks = books => ({
type: BOOKS.SET,
payload: {
books,
},
});
export { reducer_setBooks, BOOKS };
```
```js
// books.reducer.js
import BOOKS from "./books.actions.js";
// ...
const initialState = {
books: [],
};
const booksReducer = (state = initialState, action) => {
switch (action.type) {
case BOOKS.SET: {
const { books } = action.payload;
return {
...state,
books: books,
};
}
default:
return state;
}
};
export { booksReducer, initialState as booksInit };
```
### Service
Constructor that can be used with `buildClient` to assist with cancelling a request.
#### Usage
```js
// books.service.js
// ...
const client = buildClient({
baseURL: "http://localhost:8000",
});
class Books extends Service {
get() {
const { cancelToken, canceler } = this.generateCancelToken();
return [
client.get("api/books", {
cancelToken,
}),
canceler,
];
}
}
const BOOKS = new Books();
export { BOOKS };
```
```js
// index.js
// ...
try {
const [promise, canceler] = BOOKS.get();
promise
.then(res => {
// then block
})
.catch(error => {
// catch block
});
} catch (e) {
if (BOOKS.isCancel(e)) {
return console.log("Request Canceled");
}
console.log(e);
}
//... some where else in the code, to cancel the request
canceler();
// ...
```
## Component Creators
### createFormError
Create "FormError" component, that can be instantiated elsewhere. Returns a react component
#### createFormError options
| option | Type | Default | Required (or) Optional | Description |
| ------ | ----------------- | ----------- | ---------------------- | ----------- |
| icon | `React.ReactNode` | `undefined` | Required | icon node. |
Example for `icon` option,
```html
warning
```
#### FormError props
| prop name | Type | Default | Required (or) Optional | Description |
| --------- | ------------------------------------------------- | ----------- | ---------------------- | ------------------------------------------------------------- |
| touched | `boolean` | `undefined` | Optional | Boolean which tells whether the form field for focused or not |
| error | `string` | `undefined` | Optional | String which contains error message |
| align | "start" | "center" | "end" | `"start"` | Optional | allignment of the error message |
#### Basic usage
```js
// FormError.js
// ...
import { createFormError } from "@ssbdev/react-web-utilities";
export const FormError = createFormError({
icon: ,
});
```
```js
// MyForm.js
import { FormError } from "./FormError.js";
import '@ssbdev/react-web-utilities/build/styles/components/FormError.min.css';
// ...
export default () => {
// ...
return (
);
};
```
### createBreadcrumb
Create "Breadcrumb" navigation component, that can be instantiated elsewhere. Returns a react component.
#### createBreadcrumb options
| option | Type | Default | Required (or) Optional | Description |
| ----------------- | ----------------- | ---------------------------- | ---------------------- | ----------------------------------------------- |
| defaultIcon | `React.ReactNode` | `undefined` | Required | icon node. |
| activeLinkClass | `string` | `"breadcrumb--active"` | Optional | ClassName given to active crumb link |
| inactiveLinkClass | `string` | `"breadcrumb--anchor"` | Optional | ClassName given to inactive crumb link |
| iconWrapperClass | `string` | `"breadcrumb--icon-wrapper"` | Optional | ClassName given for each seperator icon-wrapper |
Example for `icon` option,
```html
warning
```
Custom styles - Append to **existing classes** as shown below (or) provide **override classes** in the options
```css
.breadcrumb {
/* your styles here */
}
.breadcrumb--anchor {
/* your styles here */
}
.breadcrumb--active {
/* your styles here */
}
.breadcrumb--icon-wrapper {
/* your styles here */
}
```
#### Breadcrumb props
| prop name | Type | Default | Required (or) Optional | Description |
| --------- | ----------------------------- | ----------- | ---------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------- |
| crumbs | [`CrumbType`](#crumbtype)`[]` | `undefined` | Required | crumb details passed along with **routeProps**. \***Note\*:** Avaliable in RouteComponentProps only when used in components rendred by "Routes" component |
| icon | `React.ReactNode` | defaultIcon | Optional | override defaultIcon |
#### CrumbType
| key name | Type | Description |
| -------- | --------- | ------------------------------------------------------ |
| key | `string` | unique key |
| content | `string` | Content that identifies the the path |
| active | `boolean` | Indicates whether the path visited is this path or not |
| href | `string` | path |
#### Basic usage
```js
// Breadcrumb.js
// ...
import { createBreadcrumb } from "@ssbdev/react-web-utilities";
import "@ssbdev/react-web-utilities/build/styles/components/Breadcrumb.min.css";
export const Breadcrumb = createBreadcrumb({
icon: ,
});
```
```js
// MyRouteComponent.js
import { Breadcrumb } from "./Breadcrumb.js";
// ...
export default props => {
const { crumbs } = props;
return (