English | [简体中文](./README.zh-cn.md)
npm install @uform/reactEnglish | 简体中文
> @uform/react is based on react and @uform/core is already built in. It provide API to manuplate form state and components for rendering support.
> it mainly includes:
>
> - Form
> - Field
> - VirtualField
> - FormaSpy
> - FormProvider
> - FormConsumer(deprecated，pls using FormSpy)
> - createFormActions (create sync API to manuplate form state)
> - createAsyncFormActions (create async API to manuplate form state)
> - FormEffectHooks (LifeCycles Hook)
``bash`
npm install --save @uform/react
- Usage
- Quick Start
- Basic Field
- Validation
- Object Field
- ArrayField
- ArrayField
- display and visible
- Linkage
- Async Linkage
- Linkage Validation
- Complex Linkage
- Reuse Effects
- Combo
- Provide and FormSpy
- Deconstruction
- Complex Deconstruction
- Components
-
-
-
-
-
-
- Hook
- useFormEffects
- useFormState
- useFieldState
- useForm
- useField
- useVirtualField
- useFormSpy
- API
- createFormActions
- createAsyncFormActions
- FormEffectHooks
- createEffectHook
- Interfaces
- IForm
- Imutators
- IFormActions
- IFormAsyncActions
- IFieldState
- IVirtualFieldState
- IFormSpyProps
- IFieldHook
- IVirtualFieldHook
- ISpyHook
- SyncValidateResponse
- AsyncValidateResponse
- ValidateResponse
- InternalFormats
- CustomValidator
- ValidateDescription
- ValidateArrayRules
- ValidatePatternRules
- IFieldAPI
- IVirtualFieldAPI
---
#### Quick Start
`jsx
import React from 'react'
import ReactDOM from 'react-dom'
import {
Form,
Field,
FormPath,
createFormActions,
FormSpy,
FormProvider,
FormConsumer,
FormEffectHooks
} from '@uform/react'
const { onFormInit$, onFormInputChange$, onFieldInputChange$ } = FormEffectHooks
const actions = createFormActions()
const App = () => {
return (
effects={() => {
onFormInit$().subscribe(() => {
console.log('initialized')
})
onFieldInputChange$().subscribe(state => {
console.log('field change', state)
})
}}
onChange={() => {}}
>
{({ state, mutators }) => (
value={state.value || ''}
onChange={mutators.change}
onBlur={mutators.blur}
onFocus={mutators.focus}
/>
{state.errors}
{state.warnings}
)}
)
}
ReactDOM.render(
`
#### Basic Field
Example：Show you how to bind the field and subsequent examples are based on this field
`tsx`
const InputField = props => (
{({ state, mutators }) => (
value={state.value || ''}
onChange={mutators.change}
onBlur={mutators.blur}
onFocus={mutators.focus}
/>
{state.errors}
{state.warnings}
)}
)
#### Validation
Example：required validation + error type validation + warning type validation + custom validation
The type of rules is ValidatePatternRules which is InternalFormats | CustomValidator | ValidateDescription | ValidateArrayRules
`jsx
import React from 'react'
import ReactDOM from 'react-dom'
import { Form, Field, createFormActions } from '@uform/react'
const actions = createFormActions()
const InputField = props => (
{({ state, mutators }) => (
value={state.value || ''}
onChange={mutators.change}
onBlur={mutators.blur}
onFocus={mutators.focus}
/>
{state.errors}
{state.warnings}
)}
)
const App = () => {
return (
ReactDOM.render(
`
#### Object Field
Example：User info user(username, age)
`jsx
import React from 'react'
import ReactDOM from 'react-dom'
import { Form, Field, createFormActions } from '@uform/react'
const actions = createFormActions()
const InputField = props => (
{({ state, mutators }) => (
value={state.value || ''}
onChange={mutators.change}
onBlur={mutators.blur}
onFocus={mutators.focus}
/>
{state.errors}
{state.warnings}
)}
)
const App = () => {
return (
ReactDOM.render(
`
#### ArrayField
Example：Id list
`jsx
import React from 'react'
import ReactDOM from 'react-dom'
import { Form, Field, createFormActions } from '@uform/react'
const actions = createFormActions()
const InputField = props => (
{({ state, mutators }) => (
value={state.value || ''}
onChange={mutators.change}
onBlur={mutators.blur}
onFocus={mutators.focus}
/>
{state.errors}
{state.warnings}
)}
)
const App = () => {
return (
ReactDOM.render(
`
#### ArrayField<Object>
Example：User list
`jsx
import React from 'react'
import ReactDOM from 'react-dom'
import { Form, Field, createFormActions } from '@uform/react'
const actions = createFormActions()
const InputField = props => (
{({ state, mutators }) => (
value={state.value || ''}
onChange={mutators.change}
onBlur={mutators.blur}
onFocus={mutators.focus}
/>
{state.errors}
{state.warnings}
)}
)
const App = () => {
return (
ReactDOM.render(
`
#### display visible
Example: see how display 与 visible affect values
`jsx
import React from 'react'
import ReactDOM from 'react-dom'
import { Form, Field, createFormActions, LifeCycleTypes, FormSpy } from '@uform/react'
const InputField = props => (
{({ state, mutators }) => {
const loading = state.props.loading
return
{ props.label && }
{ loading ? ' loading... ' :
value={state.value || ''}
onChange={mutators.change}
onBlur={mutators.blur}
onFocus={mutators.focus}
/> }
{state.errors}
{state.warnings}
}}
)
const CheckedField = props => (
{({ state, mutators }) => {
const loading = state.props.loading
return
{ props.label && }
{ loading ? ' loading... ' : {
mutators.change(!state.value)
}} checked={!!state.value} /> }
{state.errors}
{state.warnings}
}}
)
const actions = createFormActions()
const App = () => {
return (
effects={($, { validate, setFieldState }) => {
$(LifeCycleTypes.ON_FORM_INIT).subscribe(() => {
setFieldState('displayTrigger', state => state.value = true)
setFieldState('visibleTrigger', state => state.value = true)
setFieldState('a', state => state.value = 1)
setFieldState('b', state => state.value = 2)
})
$(LifeCycleTypes.ON_FIELD_VALUE_CHANGE, 'visibleTrigger').subscribe((fieldState) => {
setFieldState('a', state => {
state.visible = fieldState.value
})
})
$(LifeCycleTypes.ON_FIELD_VALUE_CHANGE, 'displayTrigger').subscribe((fieldState) => {
setFieldState('b', state => {
state.display = fieldState.value
})
})
}}
>
{({ state, form }) => {
return ()
{JSON.stringify(form.getFormState(state => state.values))}
}}
console.log(actions.getFormState(state => state.values))
}
>
print
)
}
ReactDOM.render(
`
#### Linkage
Example：Show/hide field and modified props/value by using effects
`jsx
import React from 'react'
import ReactDOM from 'react-dom'
import { Form, Field, createFormActions, LifeCycleTypes } from '@uform/react'
const InputField = props => (
{({ state, mutators }) => {
const loading = state.props.loading
return
{ props.label && }
{ loading ? ' loading... ' :
value={state.value || ''}
onChange={mutators.change}
onBlur={mutators.blur}
onFocus={mutators.focus}
/> }
{state.errors}
{state.warnings}
}}
)
const CheckedField = props => (
{({ state, mutators }) => {
const loading = state.props.loading
return
{ props.label && }
{ loading ? ' loading... ' : {
mutators.change(!state.value)
}} checked={!!state.value} /> }
{state.errors}
{state.warnings}
}}
)
const actions = createFormActions()
const App = () => {
return (
effects={($, { setFieldState }) => {
$(LifeCycleTypes.ON_FORM_INIT).subscribe(() => {
setFieldState('a~', state => state.visible = false)
})
$(LifeCycleTypes.ON_FIELD_VALUE_CHANGE, 'trigger').subscribe((triggerState) => {
setFieldState('a~', state => {
state.visible = triggerState.value
})
})
$(LifeCycleTypes.ON_FIELD_VALUE_CHANGE, 'a').subscribe((fieldState) => {
setFieldState('a-copy', state => {
state.value = fieldState.value
})
})
}}
>
ReactDOM.render(
`
#### Async Linkage
Example：Change dataSource in select asynchronously by effects
`jsx
import React from 'react'
import ReactDOM from 'react-dom'
import { Form, Field, createFormActions, LifeCycleTypes } from '@uform/react'
const InputField = props => (
{({ state, mutators }) => {
const loading = state.props.loading
return
{ props.label && }
{ loading ? ' loading... ' :
value={state.value || ''}
onChange={mutators.change}
onBlur={mutators.blur}
onFocus={mutators.focus}
/> }
{state.errors}
{state.warnings}
}}
)
const CheckedField = props => (
{({ state, mutators }) => {
const loading = state.props.loading
return
{ props.label && }
{ loading ? ' loading... ' : {
mutators.change(!state.value)
}} checked={!!state.value} /> }
{state.errors}
{state.warnings}
}}
)
const SelectField = props => (
{({ state, mutators }) => {
const { loading, dataSource = [] } = state.props
return
{ props.label && }
{ loading ? ' loading... ' :
value={state.value || ''}
onChange={mutators.change}
onBlur={mutators.blur}
onFocus={mutators.focus}
>
{dataSource.map(item => ())}
}
{state.errors}
{state.warnings}
}}
)
const actions = createFormActions()
const App = () => {
return (
effects={($, { setFieldState }) => {
$(LifeCycleTypes.ON_FIELD_VALUE_CHANGE, 'trigger').subscribe((fieldState) => {
const dataSource = [{ label: 'aa', value: 'aa' }, { label: 'bb', value: 'bb' } ]
setFieldState('sync-source', state => {
state.props.dataSource = fieldState.value ? dataSource : []
})
setFieldState('async-source', state => {
state.props.loading = true
})
setTimeout(() => {
setFieldState('async-source', state => {
state.props.loading = false
state.props.dataSource = fieldState.value ? dataSource : []
})
}, 300)
})
}}
>
ReactDOM.render(
`
#### Linkage Validation
Example：validation when form mounted and re-trigger validation when field change
`jsx
import React from 'react'
import ReactDOM from 'react-dom'
import { Form, Field, createFormActions, LifeCycleTypes } from '@uform/react'
const InputField = props => (
{({ state, mutators }) => {
const loading = state.props.loading
return
{ props.label && }
{ loading ? ' loading... ' :
value={state.value || ''}
onChange={mutators.change}
onBlur={mutators.blur}
onFocus={mutators.focus}
/> }
{state.errors}
{state.warnings}
}}
)
const actions = createFormActions()
const App = () => {
return (
effects={($, { validate, setFieldState }) => {
$(LifeCycleTypes.ON_FORM_MOUNT).subscribe(() => {
validate()
})
$(LifeCycleTypes.ON_FIELD_VALUE_CHANGE, 'a').subscribe((fieldState) => {
setFieldState('a-copy', state => {
state.value = fieldState.value
})
})
}}
>
ReactDOM.render(
`
#### Complex Linkage
Example：See how ArrayField communicate with other field by using effects
`jsx
import React from 'react'
import ReactDOM from 'react-dom'
import { Form, Field, createFormActions, LifeCycleTypes } from '@uform/react'
const InputField = props => (
{({ state, mutators }) => {
const loading = state.props.loading
return
{ props.label && }
{ loading ? ' loading... ' :
value={state.value || ''}
onChange={mutators.change}
onBlur={mutators.blur}
onFocus={mutators.focus}
/> }
{state.errors}
{state.warnings}
}}
)
const actions = createFormActions()
const App = () => {
return (
effects={($, { validate, setFieldState }) => {
$(LifeCycleTypes.ON_FORM_INIT).subscribe(() => {
setFieldState('userList.*.username', state => {
state.visible = false
})
})
$(LifeCycleTypes.ON_FIELD_VALUE_CHANGE, 'trigger').subscribe((fieldState) => {
setFieldState('userList.*.username', state => {
state.visible = fieldState.value
})
})
}}
>
} initialValue={{}}>
{({ state: innerState, mutators: innerMutator }) => {
return (
{Object.keys(innerState.value).map(key => {
if (!innerMutator.exist(key)) return
return (
name={userList[${index}].${key}}
/>
)
})}
innerMutator.change({
...innerState.value,
[new Date().getTime()]: new Date().getTime()
})
}}
>
+
)
}}
ReactDOM.render(
`
#### Reuse Effects
Make your own reusable effects.
`jsx
import React from 'react'
import ReactDOM from 'react-dom'
import { Form, Field, createFormActions, FormEffectHooks } from '@uform/react'
const InputField = props => (
{({ state, mutators }) => {
const loading = state.props.loading
return
{ props.label && }
{ loading ? ' loading... ' :
value={state.value || ''}
onChange={mutators.change}
onBlur={mutators.blur}
onFocus={mutators.focus}
/> }
{state.errors}
{state.warnings}
}}
)
const CheckedField = props => (
{({ state, mutators }) => {
const loading = state.props.loading
return
{ props.label && }
{ loading ? ' loading... ' : {
mutators.change(!state.value)
}} checked={!!state.value} /> }
{state.errors}
{state.warnings}
}}
)
const { onFormMount$, onFieldValueChange$ } = FormEffectHooks
const getEffects = ()=>{
const actions = createFormActions()
onFormMount$().subscribe(() => {
actions.setFieldState('a~', state => state.visible = false)
})
onFieldValueChange$('trigger').subscribe((triggerState) => {
actions.setFieldState('a~', state => {
state.visible = triggerState.value
})
})
onFieldValueChange$('a').subscribe((fieldState) => {
actions.setFieldState('a-copy', state => {
state.value = fieldState.value
})
})
}
const actions = createFormActions()
const App = () => {
return (
effects={() => {
getEffects()
}}
>
ReactDOM.render(
`
#### Combo
Example：Combo value of username and age. Check FormSpy for more inforation.
`jsx
import React from 'react'
import ReactDOM from 'react-dom'
import { Form, Field, createFormActions, FormSpy } from '@uform/react'
const actions = createFormActions()
const InputField = props => (
{({ state, mutators }) => (
value={state.value || ''}
onChange={mutators.change}
onBlur={mutators.blur}
onFocus={mutators.focus}
/>
{state.errors}
{state.warnings}
)}
)
const App = () => {
return (
ReactDOM.render(
`
#### Provide and FormSpy
`typescript`
Dictionary
--app
|---components
|---customForm
Example：Cross-file consumption form state, Check FormProvider and FormSpy for more infomation.
`jsx
import React from 'react'
import ReactDOM from 'react-dom'
import { Form, Field, createFormActions, FormSpy, FormProvider } from '@uform/react'
const actions = createFormActions()
const InputField = props => (
{({ state, mutators }) => (
value={state.value || ''}
onChange={mutators.change}
onBlur={mutators.blur}
onFocus={mutators.focus}
/>
{state.errors}
{state.warnings}
)}
)
const CustomForm = () => {
return (
const App = () => {
return (
{({ state, form }) => {
return (
name: {form.getFieldValue('username')}
age: {form.getFieldValue('age')}
)
}}
)
}
ReactDOM.render(
`
#### Deconstruction
`jsx
import React, { useState } from 'react'
import ReactDOM from 'react-dom'
import { Form, Field, createFormActions, FormSpy, FormPath } from '@uform/react'
const actions = createFormActions()
const App = () => {
return (
ReactDOM.render(
`
#### Complex Deconstruction
`jsx
import React, { useState } from 'react'
import ReactDOM from 'react-dom'
import { Form, Field, createFormActions, FormSpy, FormPath } from '@uform/react'
const actions = createFormActions()
const InputField = props => (
{({ state, mutators }) => {
const loading = state.props.loading
return
{ props.label && }
{ loading ? ' loading... ' :
value={state.value || ''}
onChange={mutators.change}
onBlur={mutators.blur}
onFocus={mutators.focus}
/> }
{state.errors}
{state.warnings}
}}
)
const App = () => {
return (
ReactDOM.render(
`
---
####
>
ReactDOM.render(
`
####
> Props
`typescript`
interface IFormSpyProps {
// selector, eg: [ LifeCycleTypes.ON_FORM_SUBMIT_START, LifeCycleTypes.ON_FORM_SUBMIT_END ]
selector?: string[] | string
// reducer
reducer?: (
state: any,
action: { type: string; payload: any },
form: IForm
) => any
children?: React.ReactElement | ((api: IFormSpyAPI) => React.ReactElement)
}
Usage
Example1： Form state change counter
`jsx
import React from 'react'
import ReactDOM from 'react-dom'
import { Form, Field, createFormActions, FormSpy, LifeCycleTypes } from '@uform/react'
const actions = createFormActions()
const InputField = props => (
{({ state, mutators }) => (
value={state.value || ''}
onChange={mutators.change}
onBlur={mutators.blur}
onFocus={mutators.focus}
/>
{state.errors}
{state.warnings}
)}
)
const App = () => {
return (
ReactDOM.render(
`
Example2：Combo
`jsx
import React from 'react'
import ReactDOM from 'react-dom'
import { Form, Field, createFormActions, FormSpy } from '@uform/react'
const actions = createFormActions()
const InputField = props => (
{({ state, mutators }) => (
value={state.value || ''}
onChange={mutators.change}
onBlur={mutators.blur}
onFocus={mutators.focus}
/>
{state.errors}
{state.warnings}
)}
)
const App = () => {
return (
ReactDOM.render(
`
####
> Used with FormSpy, often used in Cross-file consumption form state
Usage
`jsx
import React from 'react'
import ReactDOM from 'react-dom'
import { Form, Field, createFormActions, FormSpy, FormProvider } from '@uform/react'
const actions = createFormActions()
const InputField = props => (
{({ state, mutators }) => (
value={state.value || ''}
onChange={mutators.change}
onBlur={mutators.blur}
onFocus={mutators.focus}
/>
{state.errors}
{state.warnings}
)}
)
const CustomForm = () => {
return (
const App = () => {
return (
{({ state, form }) => {
return (
name: {form.getFieldValue('username')}
age: {form.getFieldValue('age')}
)
}}
)
}
ReactDOM.render(
`
####
> Props
`typescript`
interface IFormConsumerProps {
// eg.[ LifeCycleTypes.ON_FORM_SUBMIT_START, LifeCycleTypes.ON_FORM_SUBMIT_END ]
selector?: string[] | string
children?:
| React.ReactElement
| ((api: IFormConsumerAPI) => React.ReactElement)
}
#### useFormEffects
> Implement local effects by using useFormEffects. Same effect as the example of Linkage
> Note: The life cycle of the listener starts from ON_FORM_MOUNT
Signature
`typescript`
(effects: IFormEffect): void
`jsx
import React from 'react'
import ReactDOM from 'react-dom'
import { Form, Field, createFormActions, useFormEffects, LifeCycleTypes } from '@uform/react'
const actions = createFormActions()
const InputField = props => (
{({ state, mutators }) => {
const loading = state.props.loading
return
{ props.label && }
{ loading ? ' loading... ' :
value={state.value || ''}
onChange={mutators.change}
onBlur={mutators.blur}
onFocus={mutators.focus}
/> }
{state.errors}
{state.warnings}
}}
)
const CheckedField = props => (
{({ state, mutators }) => {
const loading = state.props.loading
return
{ props.label && }
{ loading ? ' loading... ' : {
mutators.change(!state.value)
}} checked={!!state.value} /> }
{state.errors}
{state.warnings}
}}
)
const FormFragment = () => {
useFormEffects(($, { setFieldState }) => {
$(LifeCycleTypes.ON_FORM_INIT).subscribe(() => {
setFieldState('a~', state => state.visible = false)
})
$(LifeCycleTypes.ON_FIELD_VALUE_CHANGE, 'trigger').subscribe((triggerState) => {
setFieldState('a~', state => {
state.visible = triggerState.value
})
})
$(LifeCycleTypes.ON_FIELD_VALUE_CHANGE, 'a').subscribe((fieldState) => {
setFieldState('a-copy', state => {
state.value = fieldState.value
})
})
})
return (
)
}
const App = () => {
return (
>
)
}
ReactDOM.render(
`
#### useFormState
> 使用 useFormState 为自定义组件提供FormState扩展和管理能力
签名
`typescript`
(defaultState: T): [state: IFormState, setFormState: (state?: IFormState) => void]
用法
`jsx
import React, { useRef } from 'react'
import ReactDOM from 'react-dom'
import { Form, Field, VirtualField,
createFormActions, createEffectHook,
useForm,
useFormState,
useFormEffects,
useFieldState,
LifeCycleTypes
} from '@uform/react'
const InputField = props => (
{({ state, mutators }) => {
const loading = state.props.loading
return
{ props.label && }
{ loading ? ' loading... ' :
value={state.value || ''}
onChange={mutators.change}
onBlur={mutators.blur}
onFocus={mutators.focus}
/> }
{state.errors}
{state.warnings}
}}
)
const actions = createFormActions()
const FormFragment = (props) => {
const [formState, setFormState ] = useFormState({ extendVar: 0 })
const { extendVar } = formState
return
const App = () => {
return (
ReactDOM.render(
`
#### useFieldState
> Manage state of custom field by using useFieldState
Signature
`typescript`
(defaultState: T): [state: IFieldState, setFieldState: (state?: IFieldState) => void]
`jsx
import React, { useRef } from 'react'
import ReactDOM from 'react-dom'
import { Form, Field, VirtualField,
createFormActions, createEffectHook,
useForm,
useFormEffects,
useFieldState,
LifeCycleTypes
} from '@uform/react'
const InputField = props => (
{({ state, mutators }) => {
const loading = state.props.loading
return
{ props.label && }
{ loading ? ' loading... ' :
value={state.value || ''}
onChange={mutators.change}
onBlur={mutators.blur}
onFocus={mutators.focus}
/> }
{state.errors}
{state.warnings}
}}
)
const changeTab$ = createEffectHook('changeTab')
const actions = createFormActions()
const TabFragment = (props) => {
const [fieldState, setLocalFieldState ] = useFieldState({ current: 0 })
const { current } = fieldState
const { children, dataSource, form } = props
const ref = useRef(current)
const update = (cur) => {
form.notify('changeTab', cur)
setLocalFieldState({
current: cur
})
}
useFormEffects(($, { setFieldState }) => {
dataSource.forEach((item, itemIdx) => {
setFieldState(item.name, state => {
state.display = itemIdx === current
})
})
changeTab$().subscribe((idx) => {
dataSource.forEach((item, itemIdx) => {
setFieldState(item.name, state => {
state.display = itemIdx === idx
})
})
})
})
ref.current = current
const btns = dataSource.map((item, idx) => {
console.log('current', current, ref.current)
const focusStyle = idx === current ? { color: '#fff', background: 'blue' } : {}
return
})
return btns
}
const FormTab = (props) => {
return
{({ form }) => {
return
}}
}
const App = () => {
return (
ReactDOM.render(
`
#### useForm
> get IForm instance
Signature
`typescript`
type useForm = <
Value = any,
DefaultValue = any,
EffectPayload = any,
EffectAction = any
>(
props: IFormProps
) => IForm
Usage
`typescript
import { useForm } from '@uform/react'
const FormFragment = () => {
const form = useForm()
return
#### useField
> get IFieldHook instance
Signature
typescript
type useField = (options: IFieldStateUIProps): IFieldHook
`Usage
typescript
import { useField } from '@uform/react'const FormFragment = (props) => {
const {
form,
state,
props: fieldProps,
mutators
} = useField({ name: 'username' })
return
}
`#### useVirtualField
> get IVirtualFieldHook instance
Signature
typescript
type UseVirtualField = (options: IVirtualFieldStateProps): IVirtualFieldHook
`Usage
typescript
import { UseVirtualField } from '@uform/react'const FormFragment = (props) => {
const {
form,
state,
props: fieldProps,
} = UseVirtualField({ name: 'username' })
return
{props.children}
}
`#### useFormSpy
> get ISpyHook instance. Same effect as the first example of FormSpy.
Signature
typescript
type useFormSpy = (props: IFormSpyProps): ISpyHook
`Usage
typescript
import { useFormSpy, LifeCycleTypes } from '@uform/react'
const FormFragment = (props) => {
const {
form,
state,
type,
} = useFormSpy({
selector: LifeCycleTypes.ON_FORM_VALUES_CHANGE,
reducer: (state, action, form) => ({
count: state.count ? state.count + 1 : 1
})
}) return
count: {state.count || 0}
}
`$3
> The API is fully inherited from @uform/core. The specific API of @uform/react is listed below.
---
####
> Return IFormActions
Signature
typescript
createFormActions(): IFormActions
`Usage
typescript
import { createFormActions } from '@uform/react'const actions = createFormActions()
console.log(actions.getFieldValue('username'))
`####
> Return IFormAsyncActions
Signature
typescript
createAsyncFormActions(): IFormAsyncActions
`Usage
typescript
import { createAsyncFormActions } from '@uform/react'const actions = createAsyncFormActions()
actions.getFieldValue('username').then(val => console.log(val))
`####
> Return all @uform/core lifeCycles hook which can be subscribe
Usage