How to use @zendeskgarden/react-utilities - 10 common examples
To help you get started, we’ve selected a few @zendeskgarden/react-utilities examples, based on popular ways it is used in public projects.
Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
zendeskgarden / react-components / packages / toggles / src / elements / Toggle.js View on Github 
{Children.map(children, child => {
if (!isValidElement(child)) {
return child;
}
if (hasType(child, Label)) {
const { onMouseUp, ...otherChildProps } = child.props;
return cloneElement(
child,
getLabelProps({
focused: keyboardFocused,
// Apply keyboard-only focus event
onMouseUp: composeEventHandlers(onMouseUp, onFocusMouseDown),
...otherChildProps
})
);
}
if (hasType(child, Hint)) {
return cloneElement(child, getHintProps(child.props));
}const { textValue, disabled, children: childChildren } = child.props;
const key = child.key;
/**
* Children with the `disabled` prop are not selectable
*/
if (disabled) {
return child;
}
if (
hasType(child, AddItem) ||
hasType(child, Item) ||
hasType(child, MediaItem) ||
hasType(child, NextItem) ||
hasType(child, PreviousItem)
) {
/**
* Automatically apply `textValue` if children is a string
*/
const childrenTextValue =
typeof childChildren === 'string' ? childChildren : undefined;
let itemPropMapper = getItemProps;
if (hasType(child, NextItem)) {
itemPropMapper = getNextItemProps;
} else if (hasType(child, PreviousItem)) {
itemPropMapper = getPreviousItemProps;
}const { textValue, disabled, children: childChildren } = child.props;
const key = child.key;
/**
* Children with the `disabled` prop are not selectable
*/
if (disabled) {
return child;
}
if (
hasType(child, AddItem) ||
hasType(child, Item) ||
hasType(child, MediaItem) ||
hasType(child, NextItem) ||
hasType(child, PreviousItem)
) {
/**
* Automatically apply `textValue` if children is a string
*/
const childrenTextValue =
typeof childChildren === 'string' ? childChildren : undefined;
let itemPropMapper = getItemProps;
if (hasType(child, NextItem)) {
itemPropMapper = getNextItemProps;
} else if (hasType(child, PreviousItem)) {
itemPropMapper = getPreviousItemProps;
}
return cloneElement(if (
hasType(child, AddItem) ||
hasType(child, Item) ||
hasType(child, MediaItem) ||
hasType(child, NextItem) ||
hasType(child, PreviousItem)
) {
/**
* Automatically apply `textValue` if children is a string
*/
const childrenTextValue =
typeof childChildren === 'string' ? childChildren : undefined;
let itemPropMapper = getItemProps;
if (hasType(child, NextItem)) {
itemPropMapper = getNextItemProps;
} else if (hasType(child, PreviousItem)) {
itemPropMapper = getPreviousItemProps;
}
return cloneElement(
child,
itemPropMapper({
key,
textValue: textValue || childrenTextValue,
focused: focusedKey === key,
children: childChildren,
...child.props
})
);
}{Children.map(children, child => {
if (!isValidElement(child)) {
return child;
}
if (hasType(child, Label)) {
return cloneElement(child, getLabelProps(child.props));
}
if (hasType(child, Range) || hasType(child, MultiThumbRange)) {
return cloneElement(child, getInputProps(child.props, { isDescribed }));
}
if (hasType(child, Hint)) {
return cloneElement(child, getHintProps(child.props));
}
return child;
})}{Children.map(children, child => {
if (!isValidElement(child)) {
return child;
}
if (hasType(child, Label)) {
return cloneElement(child, getLabelProps(child.props));
}
if (hasType(child, Input) || hasType(child, Textarea)) {
return cloneElement(child, getInputProps(child.props, { isDescribed }));
}
if (hasType(child, Hint)) {
return cloneElement(child, getHintProps(child.props));
}
return child;
})}{Children.map(children, child => {
if (!isValidElement(child)) {
return child;
}
if (hasType(child, Label)) {
return cloneElement(child, getFieldLabelProps(this.getLabelProps(child.props)));
}
if (hasType(child, Hint)) {
return cloneElement(child, getHintProps(child.props));
}
if (hasType(child, Select)) {
return cloneElement(child, getFieldInputProps(this.getInputProps(child.props)));
}
return child;
})}Children.forEach(options, option => {
const { textValue, disabled, children: childChildren } = option.props;
const key = option.key;
if (disabled) {
return;
}
if (
hasType(option, AddItem) ||
hasType(option, Item) ||
hasType(option, MediaItem) ||
hasType(option, NextItem) ||
hasType(option, PreviousItem)
) {
/**
* Use children as textValue if none is provided
*/
let optionTextValue = textValue;
if (optionTextValue === undefined) {
optionTextValue = typeof childChildren === 'string' ? childChildren : undefined;
}
/**
* Create model to allow keyboard selection without opening dropdown{Children.map(children, child => {
if (!isValidElement(child)) {
return child;
}
if (hasType(child, Header)) {
return cloneElement(child, getTitleProps(child.props));
}
if (hasType(child, Body)) {
return cloneElement(child, getContentProps(child.props));
}
if (hasType(child, Close)) {
return cloneElement(child, getCloseProps(child.props));
}
return child;
})}}
const { textValue, disabled, children: childChildren } = child.props;
const key = child.key;
/**
* Children with the `disabled` prop are not selectable
*/
if (disabled) {
return child;
}
if (
hasType(child, AddItem) ||
hasType(child, Item) ||
hasType(child, MediaItem) ||
hasType(child, NextItem) ||
hasType(child, PreviousItem)
) {
/**
* Automatically apply `textValue` if children is a string
*/
const childrenTextValue =
typeof childChildren === 'string' ? childChildren : undefined;
let itemPropMapper = getItemProps;
if (hasType(child, NextItem)) {
itemPropMapper = getNextItemProps;
} else if (hasType(child, PreviousItem)) {
itemPropMapper = getPreviousItemProps;
}@zendeskgarden/react-utilities
Components relating to utilities in the Garden Design System
