Features

- Conditional
- Network

Conditional

Group of components helping you in rendering components from lists or expressions.

#### Components

- Show
- IfElse
- For
- Switch

$3

Renders chilrend props if ``when` prop is true

`javascript

{jsx}

`

$3

If want to have a if-else statemnet you can wrap your `` components with this. it will only render the first `` component that has a true expression in its `when` prop

`javascript


{jsx}


{jsx}


{jsx}


`

$3

Has a variaty of ways to help you render an array with ease

`javascript

{item => (
{jsx}
)}

`

If you have small changes in your jsx depending on the index or it being the first or last item you can use it like this

`javascript

{(item, index, isFirst, isLast) => (
{jsx}
)}

`

If your jsx is completely for first or last item you can pass their function in the `firstItem` and `lastItem`. They will render in the correct place and it won't render again in the children function

`javascript
list={array}
firstItem={item => ({jsx})}
lastItem={item => ({jsx})}
>
{item => (
{jsx}
)}

`

$3

Works just like a normal switch case

`javascript


{jsx}


{jsx}


{jsx}


`

Network

It handles loading and feedback for HTTP requests.

#### Config

First you need to install axios

`bash
npm i axios
`

then you can create an axios instance and pass it to the config file and pass it to the `FlawLessUI` component

`javascript
const instance = axios.create({
baseURL: BASE_URL,
})

import { FlawLessUI, createConfig } from 'flawless-ui'

const config = createConfig({
axiosInstance: instance,
})

const root = ReactDOM.createRoot(
document.getElementById('root') as HTMLElement
)
root.render(



)
`

#### Components

- Loading
- HttpFeedback

#### Hooks

- useLoading

$3

It handles loading for the given url

`javascript
useEffect(() => {
getData()
}, [])

const getData = async () => {
await api.get(URL)
}

return (

{(loading: boolean) => (
<>
{loading ? 'loading' : 'done'}

)}

)
`

$3

First you should create your Alert components and pass to the to the config file

#### Config

`javascript
import { createConfig } from 'flawless-ui'

const config = createConfig({
...restOfConfig,
components: {
alerts: {
success: (props: AlertI) =>

S - {props.title} - {props.message}close

,
error: (props: AlertI) =>

E - {props.title} - {props.message}close

,
},
},
})
`
#### Http Methods

By default `HttpFeedback` handles error for all request but success for only post, put, patch and delete requests. You can change this how ever by passing an array of methods to the httpMethods of config

`javascript
import { createConfig, HTTP_METHODS } from 'flawless-ui'

const config = createConfig({
...restOfConfig,
httpMethods: [...HTTP_METHODS, 'get'],
})
`

Then you can use it like this

`javascript
useEffect(() => {
getData()
}, [])

const getData = async () => {
await api.get('seed/picsum/200/300')
}

return (
url={URL}
/>
)
`

The message and title passed to the alert component come from 3 methods:
- onError and onSuccess props
- success and error key value pairs in config
- status code message from config

#### onError and onSuccess props

If these functions return an object with a message key value pair it will be passed to the alert component

`javascript
url={URL}
onError={data => ({message: data.errorMessage, title: 'Error'})
/>
`

#### Status Code Messages

You can use the default STATUS_CODE_MESSAGES that are already in the config file or you change the messages to you liking

$3

If not given a url it will return true if any request is being made or if given a url only returns true for that url

`javascript
const loading = useLoading()

return (
<>
{loading ? 'loading' : 'done'}

)
``