react-admin | frontend Framework for building B2B applications | User Interface library

by marmelab TypeScript Version: 5.0.0-beta.0 License: MIT

X-Ray Key Features Code Snippets(10)Community Discussions(10)Vulnerabilities Install Support

kandi X-RAY | react-admin Summary

react-admin is a TypeScript library typically used in User Interface, React applications. react-admin has no bugs, it has no vulnerabilities, it has a Permissive License and it has medium support. You can download it from GitHub.

A frontend Framework for building B2B applications running in the browser on top of REST/GraphQL APIs, using ES6, React and Material Design

Support

Quality

Security

License

Reuse

Support

react-admin has a medium active ecosystem.

It has 22325 star(s) with 4932 fork(s). There are 273 watchers for this library.

There were 10 major release(s) in the last 12 months.

There are 102 open issues and 4081 have been closed. On average issues are closed in 16 days. There are 33 open pull requests and 0 closed requests.

It has a neutral sentiment in the developer community.

The latest version of react-admin is 5.0.0-beta.0

Quality

react-admin has 0 bugs and 0 code smells.

Security

react-admin has no vulnerabilities reported, and its dependent libraries have no vulnerabilities reported.

react-admin code analysis shows 0 unresolved vulnerabilities.

There are 0 security hotspots that need review.

License

react-admin is licensed under the MIT License. This license is Permissive.

Permissive licenses have the least restrictions, and you can use them in most projects.

Reuse

react-admin releases are available to install and integrate.

Installation instructions, examples and code snippets are available.

It has 1484 lines of code, 0 functions and 984 files.

It has low code complexity. Code complexity directly impacts maintainability of the code.

Top functions reviewed by kandi - BETA

kandi's functional review helps you automatically verify the functionalities of the libraries and avoid rework.
Currently covering the most popular Java, JavaScript and Python libraries. See a Sample of react-admin

Get all kandi verified functions for this library.

react-admin Key Features

No Key Features are available at this moment for react-admin.

react-admin Examples and Code Snippets

Create element / resource with dynamic fields in react admin

JavaScript

Lines of Code : 23

License : Strong Copyleft (CC BY-SA 4.0)

Copy

import { useFormState } from 'react-final-form'
import { Create, SimpleForm, TextInput, NumberInput, SelectInput } from 'react-admin'

const CreatePOI = (props) => {
  const { values } = useFormState()

  const choices={[
    { id: 'lak

Use the Datagrid component with custom queries - react-admin

JavaScript

Lines of Code : 45

License : Strong Copyleft (CC BY-SA 4.0)

Copy

import React, { useState } from 'react';
import keyBy from 'lodash/keyBy'
import { useQuery, Datagrid, TextField, Pagination, Loading, ListContextProvider } from 'react-admin'

export const CustomList = () => {
    const [page, setPage]

React Admin Saga after login

JavaScript

Lines of Code : 24

License : Strong Copyleft (CC BY-SA 4.0)

Copy

import {
    USER_LOGIN,
    USER_LOGIN_SUCCESS,
    USER_LOGOUT,
    REGISTER_RESOURCE,
    UNREGISTER_RESOURCE,
} from 'ra-core' 

const startStopSaga = () => function* () {
  while (true) {
    yield take(USER_LOGIN_SUCCESS) // or RE

How can one capture user login success on react admin v3.1?

JavaScript

Lines of Code : 2

License : Strong Copyleft (CC BY-SA 4.0)

Copy

import {USER_LOGIN_SUCCESS, SET_SIDEBAR_VISIBILITY} from 'react-admin'

ReferenceInput Select Input for Filter component Form

JavaScript

Lines of Code : 48

License : Strong Copyleft (CC BY-SA 4.0)

Copy

 ({ paramNameThatYourBackendExpects: searchText })}
>

this.getMany = async (resource, params) => {

    const response = {data: []}

    for (const id of params.id) {
        response.data.push(await th

Getting error trying to use use Storybook with react-admin "useField must be used inside of a component"

JavaScript

Lines of Code : 33

License : Strong Copyleft (CC BY-SA 4.0)

Copy

import { Admin, Resource, Layout, SimpleForm, TextInput, required } from 'react-admin'

const NoLayout = props => (
    
)

const Dashboard = props => (
    
        
        
    
)

const App = () => {

    return (

Not getting ID (it's undefined) of created record in redux-saga in React-admin

JavaScript

Lines of Code : 21

License : Strong Copyleft (CC BY-SA 4.0)

Copy

import { CREATE } from 'react-admin'

const interceptorDataProvider = dataProvider = async (verb, resource, params) => {
     if (verb === CREATE) {

         let response

         try {
             response = await dataProvider(verb,

How properly implement mutation on show page but not to the current resource on react-admin

JavaScript

Lines of Code : 18

License : Strong Copyleft (CC BY-SA 4.0)

Copy

import { UPDATE, UPDATE_MANY } from 'react-admin'

const routerDataProvider = dataProvider => (verb, resource, params) => {
    if ((verb === UPDATE || verb === UPDATE_MANY) && resource === 'users') {
        resource === 'mu

How to add a "reset values" button to a react-admin edit form

JavaScript

Lines of Code : 64

License : Strong Copyleft (CC BY-SA 4.0)

Copy

import {reset} from 'redux-form';
import {REDUX_FORM_NAME} from 'react-admin';

dispatch(reset(REDUX_FORM_NAME));

// ClearButton.js:

import React from 'react'
import PropTypes from 'prop-types'
import classnames

Add a custom button to react-admin app bar

JavaScript

Lines of Code : 38

License : Strong Copyleft (CC BY-SA 4.0)

Copy

// MyAppBar.js

import React from 'react'
import { AppBar } from 'react-admin'
import Typography from '@material-ui/core/Typography'
import { withStyles } from '@material-ui/core/styles'
import IconButton from '@material-ui/core/IconButton

Community Discussions

Trending Discussions on react-admin

Error: Node Sass does not yet support your current environment

Get "This page could not be found." on refresh page - using Next Js and React-admin

NPM - why do I get EBADEGINE errors while I meet versions requirements installing reactjs dependancies on docker (buster)?

react-admin add font with override MuiCssBaseline @global @font-face not working

Can't customise user menu in react-admin

React-Admin translations broken after upgrade to 3.18

Writing my own GeoJSON input component with a mapgox-gl interface

React Admin parseResponse doesn't trigger when query returns error

Recommend a drag and drop library for a react-admin dashboard?

What does name: ' XXX |||| XXXs', mean in i18n?

QUESTION

Error: Node Sass does not yet support your current environment

Asked 2022-Mar-04 at 13:55

When I start my react project in Fedora 32 using command yarn start, it shows error like this:

...

ANSWER

Answered 2022-Mar-04 at 13:55

First solution

First, make sure your node.js version is not superior than the latest stable version(currently 16.14.0). You can check here on nodejs.org.

Then, to compile .scss or .sass files you should be using sass package instead of node-sass. Fo that do :

Source https://stackoverflow.com/questions/70322912

QUESTION

Get "This page could not be found." on refresh page - using Next Js and React-admin

Asked 2022-Feb-23 at 19:37

Context I currently have created a project using React-admin and NextJS.

Problem Whenever I refresh the page I'm redirected to the 404 page - It has started after I had removed the hash from the URL (localhost:3000/#/). It only works well when I'm at the localhost:3000 page.

Code:

...

ANSWER

Answered 2022-Feb-23 at 19:37

Have you used next export in your build? If yes, you need to add this config in your next.config.js:

Source https://stackoverflow.com/questions/70687881

QUESTION

NPM - why do I get EBADEGINE errors while I meet versions requirements installing reactjs dependancies on docker (buster)?

Asked 2022-Jan-26 at 14:08

Trying to run this on docker, but I get EBADENGINE unsupported engine warning (and subsquent build fail, which I assume are related at least somewhat).

Docker command (from cloned project root with package.json file):

...

ANSWER

Answered 2022-Jan-26 at 14:08

Okay that was dumb. But yes, to read those error message for other npm newbs out there:

Source https://stackoverflow.com/questions/70644659

QUESTION

react-admin add font with override MuiCssBaseline @global @font-face not working

Asked 2022-Jan-02 at 08:53

I am trying to add the NotoSansSC-Regular.otf from Google to react-admin so that the default font for simplified Chinese will be that. I have successfully got it working if I do a CSS include of the fonts in the root html file, via a:

...

ANSWER

Answered 2022-Jan-02 at 08:53

If you are using Mui v5, the syntax is slightly different:

Source https://stackoverflow.com/questions/70546905

QUESTION

Can't customise user menu in react-admin

Asked 2021-Dec-07 at 13:58

I'm trying to customise the user menu in react-admin and I've followed the instructions and the example inside the react-admin repo but I'm still getting this error:

Type '{ ref: ForwardedRef; to: string; primaryText: string; leftIcon: Element; onClick: any; sidebarIsOpen: true; }' is missing the following properties from type 'Pick': selected, dense, className, style, and 283 more. TS2740

Here's my code.

...

ANSWER

Answered 2021-Dec-07 at 13:58

figured it out, just needed to add {...props} to MenuItemLink

Source https://stackoverflow.com/questions/70260533

QUESTION

React-Admin translations broken after upgrade to 3.18

Asked 2021-Sep-23 at 20:06

Recently upgraded React-Admin in our project from 3.16.2 to 3.18.1 and noticed a bunch of the UI strings changed.

Where it previously said, 'ADD FILTER' or 'CREATE' it now says, 'RA.ACTION.ADD_FILTER' and 'RA.ACTION.CREATE'

We weren't passing an i18nProvider prop to the component.

After the strings changed, I thought maybe it was required now, but adding one seems to have no effect.

package.json looks like this

...

ANSWER

Answered 2021-Sep-23 at 20:06

Great suggestion by Gildas to use yarn.

For those wondering, got up and running very quickly by running:

Source https://stackoverflow.com/questions/69272209

QUESTION

Writing my own GeoJSON input component with a mapgox-gl interface

Asked 2021-Sep-20 at 15:53

Hej. I want to create a react admin input component MapInput where I'm given a map with drawing controls github. There I'm able to draw my polygon and get GeoJSON as a result, which I can then send to my backend REST API server (json-server).

My system consists of my react client program, and a json-server with REST API. Example for an area in my REST API:

...

ANSWER

Answered 2021-Sep-20 at 15:53

Your custom input component must display and allow the change of the polygon. This data is in the form state, handled by react-final-form. So you'll need to use react-final-form's useField() hook to grab the input value and change callback:

Source https://stackoverflow.com/questions/69245848

QUESTION

React Admin parseResponse doesn't trigger when query returns error

Asked 2021-Aug-27 at 10:48

I'm using React Admin and ra-data-graphQl, when I update something in my UserEdit component all works perfect, BUT, when I need to handle the error message from the API, I don't know where catch it.

This is my Update query:

...

ANSWER

Answered 2021-Aug-27 at 10:48

Ok, its easier. By adding the onFailure function I can handle the error.

Source https://stackoverflow.com/questions/68937675

QUESTION

Recommend a drag and drop library for a react-admin dashboard?

Asked 2021-Aug-09 at 15:51

We have a dashboard that displays stats similar to the Posters Galore react-admin demo (https://marmelab.com/react-admin-demo/#/).

We'd like to find a way to allow the user to drag the widgets into a custom configuration.

Any thoughts on react libraries for drag and drop that would work well for this?

Thanks

...

ANSWER

Answered 2021-Aug-05 at 14:24

You can try with react-dnd library. It's the best way to implement the drag ad drop method. For your reference here I have mentioned the github code details,

https://github.com/react-dnd/react-dnd

Or you need a detailed instruction refer the below react-dnd about page,

https://react-dnd.github.io/react-dnd/about

Please check the above mentioned url or you can check the react drag and drop libraries,

https://www.npmjs.com/package/react-drag-and-drop

https://www.npmjs.com/package/react-draggable

Hope it will helps you. Have a nice day :)

Source https://stackoverflow.com/questions/68668234

QUESTION

What does name: ' XXX |||| XXXs', mean in i18n?

Asked 2021-Jun-03 at 18:58

This code is from recat-admin demo i18n translation,

...

ANSWER

Answered 2021-Jun-03 at 18:58

react-admin uses Polyglot as its default i18n provider. This is how you define singular and plural forms of a message:

name: 'Singular |||| Plural'

In some languages, you might need more than two variations:

name: 'WhenZero |||| WhenOne |||| WhenMoreThanOne'

In react-admin, you can call the useTranslate hook to get a translate function. This function accepts 2 arguments:

the translation key
an object of variables to interpolate in the translated message.

If you read polyglot documentation, you'll see there is a special variable you can pass in the second argument, called smart_count. This variable is used by polyglot to return the correct pluralized form of your message.

react-admin use this feature to get the correct title. In the case of the resource name, we display the pluralized version for the list page and the menu items, and the singular one for create, edit and show.

Source https://stackoverflow.com/questions/67667353

Community Discussions, Code Snippets contain sources that include Stack Exchange Network

Vulnerabilities

No vulnerabilities reported

Install react-admin

React-admin is available from npm. You can install it (and its required dependencies) using:.
Clone this repository and run make install to grab the dependencies, then make build to compile the sources from TypeScript to JS.
You can use Gitpod(An Online Open Source VS Code like IDE which is free for Open Source) for working on issues and making PRs. With a single click it will launch a workspace and automatically clone the repo, run make install and make start so that you can start straight away.