How to use react-view - 10 common examples

const TextareaConfig: TConfig = {
  imports: {
    'baseui/textarea': {named: ['Textarea']},
  },
  scope: {
    Textarea,
    SIZE,
    ADJOINED,
  },
  theme,
  props: {
    ...omit(inputProps, ['type', 'startEnhancer', 'endEnhancer']),
    overrides: {
      value: undefined,
      type: PropTypes.Custom,
      description: 'Lets you customize all aspects of the component.',
      custom: {
        names: ['Input', 'InputContainer'],
        sharedProps: {
          $isFocused: {
            type: PropTypes.Boolean,
            description: 'True when the component is focused.',
          },
          $disabled: 'disabled',
          $error: 'error',
          $positive: 'positive',
          $adjoined: 'adjoined',
          $size: 'size',
          $required: 'required',
        },
      },

value: '',
    },
    ...omit(inputProps, [
      'type',
      'startEnhancer',
      'endEnhancer',
      'value',
      'placeholder',
    ]),
    placeholder: {
      ...inputProps.placeholder,
      value: undefined,
    },
    overrides: {
      value: undefined,
      type: PropTypes.Custom,
      description: 'Lets you customize all aspects of the component.',
      custom: {
        names: ['Root', 'Input', 'InputContainer', 'IconWrapper'],
        sharedProps: {
          $isFocused: {
            type: PropTypes.Boolean,
            description: 'True when the component is focused.',
          },
          $disabled: 'disabled',
          $error: 'error',
          $positive: 'positive',
          $adjoined: 'adjoined',
          $size: 'size',
          $required: 'required',
        },
      },

'baseui/accordion': {named: ['Panel']},
      },
    },
    onChange: {
      value: '({expanded}) => console.log(expanded)',
      type: PropTypes.Function,
      description: 'Called when a panel is expanded.',
    },
    disabled: {
      value: false,
      type: PropTypes.Boolean,
      description: 'Renders component in disabled state.',
    },
    overrides: {
      value: undefined,
      type: PropTypes.Custom,
      description: 'Lets you customize all aspects of the component.',
      custom: {
        names: ['Content', 'Header', 'PanelContainer', 'Root', 'ToggleIcon'],
        sharedProps: {
          $disabled: 'disabled',
        },
      },
    },
  },
  mapTokensToProps: {
    Accordion: accordionProps,
    Panel: panelProps,
  },
};

export default AccordionConfig;

Accordion,
    Panel,
  },
  theme: [],
  props: {
    children: {
      value: `
  Content 1


  Content 2


  Content 3
`,
      type: PropTypes.ReactNode,
      description: `An array of Panel components.`,
      imports: {
        'baseui/accordion': {named: ['Panel']},
      },
    },
    onChange: {
      value: '({expanded}) => console.log(expanded)',
      type: PropTypes.Function,
      description: 'Called when a panel is expanded.',
    },
    disabled: {
      value: false,
      type: PropTypes.Boolean,
      description: 'Renders component in disabled state.',
    },
    overrides: {

onClose: ()=>console.log('Toast closed.'),
            overrides: {InnerContainer: {style: {width: '100%'}}}});
        }}
        >
          Show notification
        
      `,
      type: PropTypes.ReactNode,
      description: `Additional elements to render in the place where the ToasterContainer is added.
        When 'usePortal' is set to true only the ToasterContainer is rendered with portal into
        the body element but not children.`,
    },
    autoHideDuration: {
      value: '0',
      defaultValue: '0',
      type: PropTypes.Number,
      description: `The number of milliseconds to wait before automatically dismissing a
        notification. This behavior is disabled when the value is set to 0.`,
    },
    usePortal: {
      value: true,
      defaultValue: true,
      type: PropTypes.Boolean,
      description: `Indicates if 'createPortal' is used to append the toaster container to the body element.`,
      hidden: true,
    },
    overrides: {
      value: undefined,
      type: PropTypes.Custom,
      description: 'Lets you customize all aspects of the component.',
      custom: {
        names: ['Root', 'ToastBody', 'ToastInnerContainer', 'ToastCloseIcon'],

value: '({value}) => value && setValue(value)',
      type: PropTypes.Function,
      description: 'Called when slider value is changed.',
      propHook: {
        what: 'JSON.stringify(value)',
        into: 'value',
      },
    },
    onFinalChange: {
      value: '({value}) => console.log(value)',
      type: PropTypes.Function,
      description: 'Called when slider value is done changing.',
    },
    min: {
      value: undefined,
      type: PropTypes.Number,
      placeholder: '0',
      description:
        'The minimum allowed value of the slider. Cannot not be bigger than max.',
    },
    max: {
      value: undefined,
      placeholder: '100',
      type: PropTypes.Number,
      description:
        'The maximum allowed value of the slider. Cannot not be smaller than min.',
    },
    step: {
      value: undefined,
      placeholder: '1',
      type: PropTypes.Number,
      description:

'sliderHandleFillSelected',
    'sliderHandleFillSelectedHover',
    'sliderHandleFillSelectedActive',
    'sliderHandleFillDisabled',
    'sliderHandleInnerFill',
    'sliderHandleInnerFillDisabled',
    'sliderHandleInnerFillSelectedHover',
    'sliderHandleInnerFillSelectedActive',
    'sliderBorder',
    'sliderBorderHover',
    'sliderBorderDisabled',
  ],
  props: {
    value: {
      value: '[10]',
      type: PropTypes.Array,
      description: 'Slider value.',
      stateful: true,
    },
    onChange: {
      value: '({value}) => value && setValue(value)',
      type: PropTypes.Function,
      description: 'Called when slider value is changed.',
      propHook: {
        what: 'JSON.stringify(value)',
        into: 'value',
      },
    },
    onFinalChange: {
      value: '({value}) => console.log(value)',
      type: PropTypes.Function,
      description: 'Called when slider value is done changing.',

named: ['StatefulMenu'],
    },
  },
  scope: {StatefulMenu},
  theme: [
    'menuFill',
    'menuFillHover',
    'menuFontDefault',
    'menuFontDisabled',
    'menuFontHighlighted',
    'menuFontSelected',
  ],
  props: {
    items: {
      value: items,
      type: PropTypes.Array,
      description: 'Array of items in the menu.',
    },
    onItemSelect: {
      value: undefined,
      type: PropTypes.Function,
      description: 'Callback executed on menu item clicks.',
      placeholder: '({item}) => console.log(item)',
    },
    overrides: {
      value: undefined,
      type: PropTypes.Custom,
      description: 'Lets you customize all aspects of the component.',
      custom: {
        names: ['Option', 'List', 'EmptyState'],
        sharedProps: {},
      },

const drawerProps = require('!!extract-react-types-loader!../../../../src/drawer/drawer.js');

const DrawerConfig: TConfig = {
  imports: {
    'baseui/drawer': {
      named: ['Drawer'],
    },
  },
  scope: {Drawer, ANCHOR, SIZE},
  theme: [],
  props: {
    animate: {
      value: undefined,
      defaultValue: true,
      type: PropTypes.Boolean,
      description:
        'Sets whether the Drawer should be displayed by easing in and out.',
      hidden: true,
    },
    isOpen: {
      value: false,
      type: PropTypes.Boolean,
      description: 'Determines if the drawer is open.',
      stateful: true,
    },
    autoFocus: {
      value: true,
      type: PropTypes.Boolean,
      description:
        'If true, focus will shift to the first interactive element within the drawer.',
      hidden: true,

'baseui/datepicker': {
          named: ['ORIENTATION'],
        },
      },
      hidden: true,
    },
    peekNextMonth: {
      value: undefined,
      type: PropTypes.Boolean,
      description:
        'Defines if dates outside of the range of the current month are displayed.',
      hidden: true,
    },
    timeSelectStart: {
      value: undefined,
      type: PropTypes.Boolean,
      description:
        'Determines if TimePicker component will be enabled for start time',
    },
    timeSelectEnd: {
      value: undefined,
      type: PropTypes.Boolean,
      description:
        'Determines if TimePicker component will be enabled for end time',
    },
    disabled: inputConfig.props.disabled,
    trapTabbing: {
      value: undefined,
      type: PropTypes.Boolean,
      description:
        'Defines if tabbing inside the calendar is circled within it.',
      hidden: true,