Ƭ Button: ComponentType<ButtonProps>
The React component used to render a button
Ƭ ButtonProps: Object
The props of the React component used to render a button
| Name | Type | Description |
|---|---|---|
children | ReactNode | The content of the button * |
disabled? | boolean | Whether the button should be disabled Remarks For example, this is used in resizable lists when adding or removing an item would exceed the minimum or maximum allowed list length. |
onClick | () => void | The callback to invoke when the button is clicked * |
Ƭ Checkbox: ComponentType<CheckboxProps>
The React component used to render a checkbox
Ƭ CheckboxProps: Object
The props of the React component used to render a checkbox
| Name | Type | Description |
|---|---|---|
checked | boolean | Whether the checkbox is checked |
label? | string | The label to display next to the checkbox |
onCheckedChange | (checked: boolean) => void | The callback to invoke when the checked state changes |
Ƭ ComboBox: ComponentType<ComboBoxProps>
The React component used to render a combo box
Ƭ ComboBoxProps: Object
The props of the React component used to render a combo box
| Name | Type | Description |
|---|---|---|
label? | string | The label to display next to the combo box |
onValueChange | (value: string) => void | The callback to invoke when the selected value changes |
options | string[] | The list of available options |
value | string | The selected value |
Ƭ ComponentType<P>: ComponentClass<P> | VoidFunctionComponent<P>
A React component
Remarks
This varies from the ComponentType alias in the @types/react package in
that it does not implicitly add a children prop.
| Name | Type | Description |
|---|---|---|
P | Record<string, unknown> | Component props |
Ƭ Components: Object
The React components used to render various Flares
Remarks
These can be customized through the components prop of the
RunFlare component.
| Name | Type | Description |
|---|---|---|
Button | Button | The React component used to render a button |
Checkbox | Checkbox | The React component used to render a checkbox |
ComboBox | ComboBox | The React component used to render a combo box |
RadioGroup | RadioGroup | The React component used to render a group of radio buttons |
ResizableList | ResizableList | The React component used to render a resizable list |
ResizableListItem | ResizableListItem | The React component used to render a resizable list item |
Slider | Slider | The React component used to render a slider |
SpinButton | SpinButton | The React component used to render a spin button |
Switch | Switch | The React component used to render a switch |
TextBox | TextBox | The React component used to render a text box |
Ƭ Flare<A>: Object
The basic building block of a Flare UI, capable of providing a value when queried and invoking some upstream handler when the value changes
| Name | Description |
|---|---|
A | The value the Flare produces |
| Name | Type | Description |
|---|---|---|
_tag | "Flare" | Tags the object as a Flare. |
make | () => { query: () => A ; render: VoidFunctionComponent<{ onChange: () => void }> } | Initializes the Flare. |
Ƭ RadioGroup: ComponentType<RadioGroupProps>
The React component used to render a group of radio buttons
Ƭ RadioGroupProps: Object
The props of the React component used to render a group of radio buttons
| Name | Type | Description |
|---|---|---|
label? | string | The label to display next to the group of radio buttons |
onValueChange | (value: string) => void | The callback to invoke when the selected value changes |
options | string[] | The list of available options |
value | string | The selected value |
Ƭ ResizableList: ComponentType<ResizableListProps>
The React component used to render a resizable list
Ƭ ResizableListItem: ComponentType<ResizableListItemProps>
The React component used to render a resizable list item
Ƭ ResizableListItemProps: Object
The props of the React component used to render a resizable list item
| Name | Type | Description |
|---|---|---|
addButton | ReactNode | The button used to add an item before the current item |
children | ReactNode | The main content of the item |
removeButton | ReactNode | The button used to remove the item |
Ƭ ResizableListProps: Object
The props of the React component used to render a resizable list
| Name | Type | Description |
|---|---|---|
addButton | ReactNode | The button used to add an item to the end of the list |
children | ReactNode | The current list of items |
Ƭ RunFlareProps<A>: Object
RunFlare component props
| Name | Description |
|---|---|
A | The value produced by the Flare |
| Name | Type | Description |
|---|---|---|
components? | Partial<Components> | Component overrides |
flare | Flare<A> | The Flare to run |
handler | (a: A) => void | The procedure to run when the value changes |
Ƭ Slider: ComponentType<SliderProps>
The React component used to render a slider
Ƭ SliderProps: Object
The props of the React component used to render a slider
| Name | Type | Description |
|---|---|---|
label? | string | The label to display next to the slider |
max? | number | The maximum value that can be selected |
min? | number | The minimum value that can be selected |
onValueChange | (value: number) => void | The callback to invoke when the selected value changes |
step? | number | The granularity of the selected value |
value | number | The selected value |
Ƭ SpinButton: ComponentType<SpinButtonProps>
The React component used to render a spin button
Ƭ SpinButtonProps: Object
The props of the React component used to render a spin button
| Name | Type | Description |
|---|---|---|
label? | string | The label to display next to the spin button |
max? | number | The maximum value that can be selected |
min? | number | The minimum value that can be selected |
onValueChange | (value: number) => void | The callback to invoke when the selected value changes |
step? | number | The granularity of the selected value |
value | number | The selected value |
Ƭ Switch: ComponentType<SwitchProps>
The React component used to render a switch
Ƭ SwitchProps: Object
The props of the React component used to render a switch
| Name | Type | Description |
|---|---|---|
checked | boolean | Whether the switch is toggled on |
label? | string | The label to display next to the switch |
onCheckedChange | (checked: boolean) => void | The callback to invoke when the switch is toggled |
Ƭ TextBox: ComponentType<TextBoxProps>
The React component used to render a text box
Ƭ TextBoxProps: Object
The props of the React component used to render a text box
| Name | Type | Description |
|---|---|---|
label? | string | The label to display next to the text box |
onValueChange | (value: string) => void | The callback to invoke when the value changes |
value | string | The value |
Ƭ Unflare<F>: F extends Flare<infer A> ? A : never
A utility type that extracts the type parameter A from a Flare<A>
Remarks
A Flare<A> produces values of type A. The A type can sometimes be
useful, for example to annotate function parameters where TypeScript
struggles to infer types.
| Name | Description |
|---|---|
F | The Flare<A> from which to extract A |
▸ RunFlare<A>(props): ReactElement
A React component that renders the specified Flare.
| Name |
|---|
A |
| Name | Type |
|---|---|
props | RunFlareProps<A> |
ReactElement
▸ ap<A, B>(fa): (fab: Flare<(a: A) => B>) => Flare<B>
Applies a function to a value within a Flare context.
| Name | Description |
|---|---|
A | The value to which to apply the function |
B | The return value of the function |
| Name | Type | Description |
|---|---|---|
fa | Flare<A> | The Flare that produces the original value |
fn
A Flare that produces the result of the function application
▸ (fab): Flare<B>
| Name | Type |
|---|---|
fab | Flare<(a: A) => B> |
Flare<B>
▸ chain<A, B>(afb): (fa: Flare<A>) => Flare<B>
Composes Flares in a sequence.
| Name | Description |
|---|---|
A | The value produced by the first Flare |
B | The value produced by the second Flare |
| Name | Type | Description |
|---|---|---|
afb | (a: A) => Flare<B> | The function to apply to the output of the first Flare to produce the second Flare |
fn
The Flare resulting from the composition
▸ (fa): Flare<B>
| Name | Type |
|---|---|
fa | Flare<A> |
Flare<B>
▸ checkbox(options): Flare<boolean>
Creates a Flare that renders as a checkbox control.
| Name | Type | Description |
|---|---|---|
options | Object | Checkbox options |
options.initial | boolean | Initial checked state |
options.label? | string | Checkbox label |
Flare<boolean>
The Flare that was created
▸ comboBox<A, C>(options): Flare<A>
Creates a Flare that renders as a combo box.
| Name | Type | Description |
|---|---|---|
A | A | The value that the combo box produces |
C | extends { optionToString?: undefined } | { optionToString: (option: A) => string } | An additional optionToString option, required to convert A to string when it doesn't already extend string |
| Name | Type | Description |
|---|---|---|
options | { initial: A ; label?: string ; options: readonly A[] } & C | Combo box options |
Flare<A>
The Flare that was created
▸ ifElse<A, B>(a, b): (cond: boolean) => Flare<A | B>
Combines two Flares into one, producing the value from the original Flare that corresponds to the boolean expression provided.
| Name | Description |
|---|---|
A | The value produced by the first Flare |
B | The value produced by the second Flare |
| Name | Type | Description |
|---|---|---|
a | Flare<A> | The value produced by the first Flare |
b | Flare<B> | The value produced by the second Flare |
fn
The first Flare when the boolean expession is true; otherwise, the
second Flare
▸ (cond): Flare<A | B>
| Name | Type |
|---|---|
cond | boolean |
Flare<A | B>
Remarks
This is typically used with chain.
▸ makeFlare<O, A>(Component): (options: O extends { initial: A } ? O : never) => Flare<A>
Turns an ordinary React component into a function that produces a Flare.
| Name | Type | Description |
|---|---|---|
O | O | Flare options, forwarded to the component as props |
A | O extends { initial: X } ? X : never | The value the Flare produces |
| Name | Type | Description |
|---|---|---|
Component | (props: Omit<O, "initial"> & { onChange: (value: A) => void ; value: A }) => Element | The React component to turn into a Flare |
fn
A Flare that renders as the provided React component
▸ (options): Flare<A>
| Name | Type |
|---|---|
options | O extends { initial: A } ? O : never |
Flare<A>
Remarks
This is primarily intended for internal use. Before creating custom
Flares, consider using CSS to customize existing elements or using the
components prop of RunFlare.
▸ map<A, B>(ab): (fa: Flare<A>) => Flare<B>
Applies a function to a Flare to change its output.
| Name | Description |
|---|---|
A | The value produced by the original Flare |
B | The value produced by the modified Flare |
| Name | Type | Description |
|---|---|---|
ab | (a: A) => B | The function to apply to the output of the original Flare |
fn
A Flare that produces the result of the function application
▸ (fa): Flare<B>
| Name | Type |
|---|---|
fa | Flare<A> |
Flare<B>
▸ match<M>(map): M extends Record<string | number, Flare<infer A>> ? (key: keyof M) => Flare<A> : never
Combines multiple Flares into one, producing the value from the original Flare that corresponds to the expression provided.
| Name | Description |
|---|---|
M | The map of Flares from which to select |
| Name | Type | Description |
|---|---|---|
map | M | The map of Flares from which to select |
M extends Record<string | number, Flare<infer A>> ? (key: keyof M) => Flare<A> : never
A function that returns the Flare from the map corresponding to the
specified key
Remarks
This is typically used with chain.
▸ of<A>(a): Flare<A>
Lifts a value into a Flare context.
| Name | Description |
|---|---|
A | The value to lift |
| Name | Type | Description |
|---|---|---|
a | A | The value to lift |
Flare<A>
A Flare that produces the specified value a
▸ radioGroup<A, C>(options): Flare<A>
Creates a Flare that renders as a group of radio buttons.
| Name | Type | Description |
|---|---|---|
A | A | The value that the radio button group produces |
C | extends { optionToString?: undefined } | { optionToString: (option: A) => string } | An additional optionToString option, required to convert A to string when it doesn't already extend string |
| Name | Type | Description |
|---|---|---|
options | { initial: A ; label?: string ; options: readonly A[] } & C | Radio group options |
Flare<A>
The Flare that was created
▸ resizableList<A>(options): Flare<A[]>
Creates a Flare that renders as a resizable list of Flares.
| Name |
|---|
A |
| Name | Type | Description |
|---|---|---|
options | Object | Resizable list options |
options.initial? | Flare<A>[] | The initial list of Flares |
options.item | Flare<A> | The Flare used each time an item is added to the list |
options.maxLength? | number | The maximum length of the list |
options.minLength? | number | The minimum length of the list |
Flare<A[]>
The Flare that was created
▸ slider(options): Flare<number>
Creates a Flare that renders as a slider.
| Name | Type | Description |
|---|---|---|
options | Object | Slider options |
options.initial | number | Initial slider state |
options.label? | string | Slider label |
options.max? | number | Maximum selectable value |
options.min? | number | Minimum selectable value |
options.step? | number | The granularity of the slider value |
Flare<number>
The Flare that was created
▸ spinButton(options): Flare<number>
Creates a Flare that renders as a spin button.
| Name | Type | Description |
|---|---|---|
options | Object | Spin button options |
options.initial | number | Initial spin button state |
options.label? | string | Spin button label |
options.max? | number | Maximum selectable value |
options.min? | number | Minimum selectable value |
options.step? | number | The granularity of the spin button value |
Flare<number>
The Flare that was created
▸ switch_(options): Flare<boolean>
Creates a Flare that renders as a switch.
| Name | Type | Description |
|---|---|---|
options | Object | Switch options |
options.initial | boolean | Initial switch state |
options.label? | string | Switch label |
Flare<boolean>
The Flare that was created
▸ textBox(options): Flare<string>
Creates a Flare that renders as a text box.
| Name | Type | Description |
|---|---|---|
options | Object | Text box options |
options.initial | string | Initial text box state |
options.label? | string | Text box label |
options.nonEmpty? | boolean | - |
Flare<string>
The Flare that was created