Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

React Admin - How To Hide Actions Buttons

How could I hide the action buttons in the React-Admin 2.2.0 framework?

For example, I want to hide just the export button, or show only the Refresh and Export buttons.

like image 904
Katliss.26 Avatar asked Aug 27 '18 14:08

Katliss.26


People also ask

How do I restrict button click in React?

To prevent multiple button clicks in React: Set an onClick prop on the button, passing it a function. When the button gets clicked, set its disabled attribute to true .

How do I hide text on button click in React?

Save this question. Show activity on this post. import React { useState } from "react"; function App() { const [hideText, setHideText] = useState(false); const onClick = () => setHideText(false); return ( <div> <button onClick={onClick}>Click me</button> {hideText ?


1 Answers

Well, I found the solution myself.

When you want to hide all buttons:

import { List, CardActions } from 'react-admin';

const NoneActions = props => (
    <CardActions />
);

export const AdminList = (props) => (
    <List title="Admin List" {...props} actions={<NoneActions />}>
        ...
    </List>
);

When you want to show only the reload Button:

import { List, CardActions, RefreshButton } from 'react-admin';

const ActionsRefresh = props => (
    <CardActions>
        <RefreshButton />
    </CardActions>
);

export const AdminList = (props) => (
    <List title="Admin List" {...props} actions={<ActionsRefresh />}>
        ...
    </List>
);
like image 139
Katliss.26 Avatar answered Nov 07 '22 21:11

Katliss.26