How to use the uncontrollable.useUncontrolled function in uncontrollable

To help you get started, we’ve selected a few uncontrollable 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.

github react-bootstrap / react-bootstrap / src / Accordion.js View on Github external
const Accordion = React.forwardRef((props, ref) => {
  let {
    // Need to define the default "as" during prop destructuring to be compatible with styled-components github.com/react-bootstrap/react-bootstrap/issues/3595
    as: Component = 'div',
    activeKey,
    bsPrefix,
    children,
    className,
    onSelect,
    ...controlledProps
  } = useUncontrolled(props, {
    activeKey: 'onSelect',
  });

  bsPrefix = useBootstrapPrefix(bsPrefix, 'accordion');

  return (
    
      
        
          {children}
github sociomantic-tsunami / nessie-ui / src / ComboBox / index.jsx View on Github external
inputPlaceholder,
    isDisabled,
    isMultiselect,
    isReadOnly,
    isSearchable,
    onBlur,
    onChange,
    onChangeInput,
    onClick,
    onFocus,
    options: rawOptions,
    popperContainer,
    style,
    value: rawValue,
    ...restProps
  } = useUncontrolled(props, { value: "onChange" });

  // normalize the options passed as prop
  const options = useMemo(
    () =>
      Array.isArray(rawOptions)
        ? rawOptions.map(opt =>
            typeof opt === "object"
              ? opt
              : { id: String(opt), text: String(opt) }
          )
        : [],
    [rawOptions]
  );

  // flat array of all options
  const flatOptions = useMemo(
github react-bootstrap / react-overlays / src / Dropdown.js View on Github external
function Dropdown({
  drop,
  alignEnd,
  defaultShow,
  show: rawShow,
  onToggle: rawOnToggle,
  itemSelector,
  focusFirstItemOnShow,
  children,
}) {
  const forceUpdate = useForceUpdate();
  const { show, onToggle } = useUncontrolled(
    { defaultShow, show: rawShow, onToggle: rawOnToggle },
    { show: 'onToggle' },
  );

  const [toggleElement, setToggle] = useCallbackRef();

  // We use normal refs instead of useCallbackRef in order to populate the
  // the value as quickly as possible, otherwise the effect to focus the element
  // may run before the state value is set
  const menuRef = useRef();
  const menuElement = menuRef.current;

  const setMenu = useCallback(
    ref => {
      menuRef.current = ref;
      // ensure that a menu set triggers an update for consumers

uncontrollable

Wrap a controlled react component, to allow specific prop/handler pairs to be uncontrolled

MIT
Latest version published 1 year ago

Package Health Score

70 / 100
Full package analysis