How to use @material-ui/lab - 10 common examples
To help you get started, we’ve selected a few @material-ui/lab 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.
mui-org / material-ui / docs / src / pages / components / autocomplete / Filter.tsx View on Github 
/* eslint-disable no-use-before-define */
import React from 'react';
import TextField from '@material-ui/core/TextField';
import Autocomplete, { createFilterOptions } from '@material-ui/lab/Autocomplete';
const filterOptions = createFilterOptions({
matchFrom: 'start',
stringify: (option: FilmOptionType) => option.title,
});
export default function Filter() {
return (
option.title}
filterOptions={filterOptions}
style={{ width: 300 }}
renderInput={params => (
)}
/>/* eslint-disable no-use-before-define */
import React from 'react';
import TextField from '@material-ui/core/TextField';
import Autocomplete, { createFilterOptions } from '@material-ui/lab/Autocomplete';
const filterOptions = createFilterOptions({
matchFrom: 'start',
stringify: option => option.title,
});
export default function Filter() {
return (
option.title}
filterOptions={filterOptions}
style={{ width: 300 }}
renderInput={params => (
)}
/>import {isNumber, isString} from 'lodash';
import {PropTypes} from '@material-ui/core';
import {
createStyles,
Theme,
withStyles,
WithStyles
} from '@material-ui/core/styles';
import TextField from '@material-ui/core/TextField';
import Typography from '@material-ui/core/Typography';
// TODO: Import properly after https://github.com/mui-org/material-ui/issues/11736 is fixed
// tslint:disable-next-line: no-var-requires
const Slider = require('@material-ui/lab/Slider').default;
const styles = (theme: Theme) => createStyles({
root: {
display: 'inline-flex',
flexDirection: 'column',
minWidth: 0
},
slider: {
// TODO: Remove when https://github.com/mui-org/material-ui/issues/13455 is fixed
padding: 24,
margin: -24,
overflow: 'hidden',
boxSizing: 'content-box'
},
marginNormal: {export default function UseAutocomplete() {
const classes = useStyles();
const {
getRootProps,
getInputLabelProps,
getInputProps,
getListboxProps,
getOptionProps,
groupedOptions,
} = useAutocomplete({
id: 'use-autocomplete-demo',
options: top100Films,
getOptionLabel: option => option.title,
});
return (
<div>
<div>
<label>
useAutocomplete
</label>
<input>
</div>
{groupedOptions.length > 0 ? (
<ul>
{groupedOptions.map((option, index) => (</ul></div>export default function CustomizedHook() {
const {
getRootProps,
getInputLabelProps,
getInputProps,
getTagProps,
getListboxProps,
getOptionProps,
groupedOptions,
value,
focused,
setAnchorEl,
} = useAutocomplete({
id: 'customized-hook-demo',
defaultValue: [top100Films[1]],
multiple: true,
options: top100Films,
getOptionLabel: option => option.title,
});
return (
<div>
<div>
<label>Customized hook</label>
{value.map((option: FilmOptionType, index: number) => (
))}
<input></div></div>export default function UseAutocomplete() {
const classes = useStyles();
const {
getRootProps,
getInputLabelProps,
getInputProps,
getListboxProps,
getOptionProps,
groupedOptions,
} = useAutocomplete({
id: 'use-autocomplete-demo',
options: top100Films,
getOptionLabel: option => option.title,
});
return (
<div>
<div>
<label>
useAutocomplete
</label>
<input>
</div>
{groupedOptions.length > 0 ? (
<ul>
{groupedOptions.map((option, index) => (</ul></div>export default function CustomizedHook() {
const {
getRootProps,
getInputLabelProps,
getInputProps,
getTagProps,
getListboxProps,
getOptionProps,
groupedOptions,
value,
focused,
setAnchorEl,
} = useAutocomplete({
id: 'customized-hook-demo',
defaultValue: [top100Films[1]],
multiple: true,
options: top100Films,
getOptionLabel: option => option.title,
});
return (
<div>
<div>
<label>Customized hook</label>
{value.map((option, index) => (
))}
</div></div>import React from 'react'
import TextField from '@material-ui/core/TextField'
import Checkbox from '@material-ui/core/Checkbox'
import CheckBoxIcon from '@material-ui/icons/CheckBox'
import CheckBoxOutlineBlankIcon from '@material-ui/icons/CheckBoxOutlineBlank'
import Autocomplete, {
createFilterOptions,
} from '@material-ui/lab/Autocomplete'
import { useGetList, useTranslate } from 'react-admin'
import PropTypes from 'prop-types'
import { isWritable } from '../common'
import { makeStyles } from '@material-ui/core'
const filter = createFilterOptions()
const useStyles = makeStyles({
root: { width: '100%' },
checkbox: { marginRight: 8 },
})
export const SelectPlaylistInput = ({ onChange }) => {
const classes = useStyles()
const translate = useTranslate()
const { ids, data } = useGetList(
'playlist',
{ page: 1, perPage: -1 },
{ field: 'name', order: 'ASC' },
{}
)exports.speedDialClass = require('@material-ui/lab/SpeedDial').default;
exports.speedDialIconClass = require('@material-ui/lab/SpeedDialIcon').default;
exports.speedDialActionClass = require('@material-ui/lab/SpeedDialAction').default;exports.speedDialClass = require('@material-ui/lab/SpeedDial').default;
exports.speedDialIconClass = require('@material-ui/lab/SpeedDialIcon').default;
exports.speedDialActionClass = require('@material-ui/lab/SpeedDialAction').default;@material-ui/lab
Material-UI Lab - Incubator for Material-UI React components.
