A react component library for Seidr.

Seidr React provides react components and hooks to interact with Seidr's features.

You have seidr running? Good. All you need is to install Seidr React and leverage its components. We highly recommend using pnpm over npm.

• Create your app
• Install requirements: pnpm i seidr-react

• Install dependencies¹:
  • Run pnpm ci, if you want to install the current version without any changes.
  • Run pnpm i, if you intend to update/change dependencies or the version.
• Run: pnpm run storybook

To leverage Seidr React wrap your react application with SeidrProvider. SeidrProvider has several props, of which baseUrl is the most important. Set it to your Seidr backend URL. If not set, SeidrProvider will assume the baseUrl to be window.location.origin.

prop	value	description
baseUrl	string	The base URL of your Seidr application. (Example: www.domain.com/api/v1)
theme	object: MantineThemeOverride	A theme object to style Seidr components (e.g. DataGrid) globally
inheritMantineTheme	boolean	Determines if a MantineTheme from an outer scope should be merged with Seidr's default theme or the MantineTheme provided (see theme property)

You now can use Seidr React's components and hooks anywhere in the application.

Provides the baseUrl and information from Seidr's SeidrInfo throughout your application. SeidrInfo data will automatically retrieved, once the user is authenticated.

Provides the merged MantineTheme throughout your application.

Provides user, error, loading, signin, signout, update, resetPassword to interact with ** Seidr's** authentication functionality. This hook will also trigger a rerender when user, error and loading change (react lifecycle).

Provides path, data, info, queryParams, loading, error, setQueryParams, getEntry, addEntry , updateEntry, deleteEntry to interact with Seidr's BaseModelRestApi. Setting queryParams via setQueryParams will trigger an update of data.

Creates a dropdown according to Mantine's menu. The dropdown includes links to react-router routes with the following paths:

• /users
• /roles
• /permissions
• /viewmenus
• /permissionviews

These paths will be appended to the provided basePath.

prop	value	description
basePath	string	Determines the base path to append the routes' paths to, defaults to /security
Target	ReactNode	A react element to render instead of the default button
children	ReactNode	A set of mantine's Menu.Divider, Menu.Label and Menu.Item to append to the dropdown

SeidrApiProvider interacts with Seidr's BaseModelRestApi. Path should be the same as resource_name used in BaseModelRestApi.

prop	value	description
path	string	The path segment to add to the baseUrl provided to SeidrProvider. The resulting url should point to a valid Seidr base route. Will ignore baseUrl, if it is a URL.
relation	object: Relation	A base filter to apply (currently used in the context of RelatedAPIs)
initialQueryParams	object: QueryParams	Set initial query parameters

A feature rich table component that leverages useApi internally. Use this, if you don't want to implement your own table.

prop	value	description
hideToolbar	boolean	Hide toolbar, the toolbar is the upper section containing Settings, Add and Filter
hideFilter	boolean	Hide filters
hideSettings	boolean	Hide settings
hideError	boolean	Hide error modal when a customized error modal is necessary
hideActions	boolean	Hide Action column on every row >
hidePagination	boolean	Hide Pagination
hideAdd	boolean	Hide add button from toolbar
settings	object: Settings	Style settings
rowsPerPageProps	number	Externally control page size
fetchOnMount	boolean	Determines if the table should trigger a data fetch on mount, defaults to true
onSelectEntry	function	Callback to be fired on entry selection
styles	object: DataGridStyles	Interface to style DataGrid (based on Mantine's StylesAPI)

prop	value	description
name	string	Name of the quick filter to leverage provided by the backend

Creates a Mantine Checkbox.Group based on a quick filter of the type multiselect that creates a new filter of the type {col: <quickfilter.column>, opr: 'in', value: } (FilterIn) if it doesn't exist, else updates it.

Creates a Mantine MultiSelect based on a quick filter of the type multiselect that creates a new filter of the type {col: <quickfilter.column>, opr: 'in', value: } (FilterIn) if it doesn't exist, else updates it.

Creates a Mantine Select based on a quick filter of the type select that creates a new filter of the type {col: <quickfilter.column>, opr: 'eq', value: } (FilterEqual) if it doesn't exist, else updates it.

useSeidrAuth assumes the presence of AuthApi provided by Seidr in your backend. Given this and correctly set paths, you gain the full capability of a session based authentication feature which has the same (except OIDC) functionality as Flask Appbuilder's

Seidr React provides the same StylesAPI as on Mantine.

1. pnpm i will update pnpm-lock.yaml if changes occured, while pnpm ci will wipe your node_modules folder and install dependencies only from pnpm-lock.yaml ↩

2. Can only be used inside of SeidrApiProvider. ↩ ↩²

3. Also supports any prop for Mantine's CheckBox.Group ↩

4. Also supports any prop for Mantine's MultiSelect ↩

5. Also supports any prop for Mantine's Select ↩