How to use uno-react - 10 common examples

},
        );
    };

    const onCloseDialog = () => {
        setDialog(false);
        setReset(true);
    };

    const marginButton = recaptcha.siteKey && recaptcha.siteKey !== '' ? '25px 0 0 180px' : '100px 0 0 180px';

    ValidatorForm.addValidationRule('isUserName', (value: string) =>
        new RegExp(validationRegex.usernameRegex).test(value),
    );

    ValidatorForm.addValidationRule('isUserEmail', (value: string) =>
        new RegExp(validationRegex.emailRegex).test(value),
    );

    ValidatorForm.addValidationRule('isPasswordMatch', (value: string, comparedValue: any) => value === comparedValue);

    return (
        <>

const onCloseDialog = () => {
        setDialog(false);
        setReset(true);
    };

    const marginButton = recaptcha.siteKey && recaptcha.siteKey !== '' ? '25px 0 0 180px' : '100px 0 0 180px';

    ValidatorForm.addValidationRule('isUserName', (value: string) =>
        new RegExp(validationRegex.usernameRegex).test(value),
    );

    ValidatorForm.addValidationRule('isUserEmail', (value: string) =>
        new RegExp(validationRegex.emailRegex).test(value),
    );

    ValidatorForm.addValidationRule('isPasswordMatch', (value: string, comparedValue: any) => value === comparedValue);

    return (
        <>

return;
                }
                setDialog(true);
                setDisabled(false);
            },
        );
    };

    const onCloseDialog = () => {
        setDialog(false);
        setReset(true);
    };

    const marginButton = recaptcha.siteKey && recaptcha.siteKey !== '' ? '25px 0 0 180px' : '100px 0 0 180px';

    ValidatorForm.addValidationRule('isUserName', (value: string) =>
        new RegExp(validationRegex.usernameRegex).test(value),
    );

    ValidatorForm.addValidationRule('isUserEmail', (value: string) =>
        new RegExp(validationRegex.emailRegex).test(value),
    );

    ValidatorForm.addValidationRule('isPasswordMatch', (value: string, comparedValue: any) => value === comparedValue);

    return (
        <>

const CustomLayoutDataGrid: React.FunctionComponent = () => {

  const [getErrorMessage] = React.useState(null as string);
  const tbTableInstance = useTbTable(sampleColumns, localData);
  const onRowClick = (row) => console.log(row);
  const [isMobileResolution] = useResolutionSwitch(800, 400);
  if (isMobileResolution) {
    return (
      
        
        
      
    );
  }

  return (
    <>
      {getErrorMessage && (

export default () => {
    const classes = useStyles({});
    const [openGrid, toggleOpenGrid] = useToggle(false);
    const [openDialog, toggleOpenDialog] = useToggle(false);
    const [refresh, forceRefresh] = useGridRefresh();

    const links = ['Button on Toolbar'];
    const path = '/tubular-react/features/dialog#';
    const dialogToolbarDescription = `You can add a button on the toolbar to open a dialog or do any other action,
    this is very useful in actions like adding rows. Using our Hook 'useGridRefresh' you can
    control when the grid renders.`;

    const dialog = {
        code: dialogGrid,
        description: dialogToolbarDescription,
        id: 'Dialog with button in Toolbar',
        open: openGrid,
        options: DialogOptions(toggleOpenDialog),
        refresh,
        toggle: toggleOpenGrid,

export default () => {
    const classes = useStyles({});
    const [openLocal, toggleOpenLocal] = useToggle(false);
    const [openNull, toggleOpenNull] = useToggle(false);

    const links = ['LocalStorage', 'NullStorage'];
    const path = '/tubular-react/features/storage#';
    const localDescription = `You can set that the grid keep data in the local storage, so when you refresh the page,
     all filters, sorting and page number will remain.`;

    const nullDescription = `If you don't want that the grid saves your options, you can set a NullStorage,
     this will reset everything if you refresh the page`;

    const localStorage = {
        code: localStorageGrid,
        description: localDescription,
        id: 'LocalStorage',
        open: openLocal,
        options: new ToolbarOptions(),

export default () => {
    const classes = useStyles({});
    const [openSorting, toggleOpenSorting] = useToggle(false);

    const links = ['Sorting'];
    const path = '/tubular-react/features/sorting#';
    const sortingDescription = `At column definition, you can select which columns will be sortable, just click on the column header to sort.`;

    const sorting = {
        code: sortingGrid,
        columns: sortingColumns,
        description: sortingDescription,
        id: 'Sorting',
        open: openSorting,
        options: NoOptions,
        toggle: toggleOpenSorting,
    };

    return (

export default () => {
    const classes = useStyles({});
    const [openBasic, toggleOpenBasic] = useToggle(false);
    const [openAdvanced, toggleOpenAdvanced] = useToggle(false);

    const links = ['BasicPagination', 'AdvancedPagination'];
    const path = '/tubular-react/features/pagination#';
    const basicDescription = `By default, every grid has a pagination component that helps you navigate through your data.
    In the ToolbarOptions object you can select if you want to display pager on top, bottom or both`;

    const advancedDescription = `If you have several data, you can add some useful options to the paginator with advancePagination
     in the ToolbarOptions. This will help to navigate more easily.`;

    const basicPagination = {
        code: basicPaginationGrid,
        description: basicDescription,
        id: 'BasicPagination',
        open: openBasic,
        options: BasicPagination,
        toggle: toggleOpenBasic,

export default () => {
    const classes = useStyles({});
    const [openExport, toggleOpenExport] = useToggle(false);
    const [openPrint, toggleOpenPrint] = useToggle(false);
    const [openSearch, toggleOpenSearch] = useToggle(false);

    const links = ['ExportButton', 'PrintButton', 'SearchText'];
    const path = '/tubular-react/features/toolbar#';
    const exportDescription = `You can add a export button to the grid's toolbar. It will let you to export your data to a CSV file`;

    const printDescription = `If you need your grid to be printable, it's easy, you just need to add the printButton property as true in your
    toolbarOptions object. The title of the document will be the gridName defined in the component`;

    const searchDescription = `You can also implement a free-text search to your grid, every column defined in your grid with
     the Searchable property will be filtered with this input. This works only on string-type columns`;

    const exportButton = {
        code: exportButtonGrid,
        description: exportDescription,
        id: 'ExportButton',

export default ({ children, title, text, api, code }: any) => {
    const classes = useStyles({});
    const [openApi, setOpenApi] = useToggle(false);
    const [openCode, setOpenCode] = useToggle(false);

    return (
        <div id="{title}">
            <div>
                
                    {title}
                
                
                    
                        <code>
                    </code></div></div>