@medha-analytics/medha-one-access-react

ACL admin dashboard React library — drop-in Users / Groups / Artifacts / Access Rules / Hierarchy management UI, backed by the Medha One Access API.

For instructions on building and distributing this package itself (local link, GitHub, or npm), see PUBLISHING.md.

Installation

npm install @medha-analytics/medha-one-access-react

Peer dependencies

The host app must provide these (they are not bundled):

npm install react react-dom @tanstack/react-query

Quick start

Wrap your app (or the relevant section of it) in MedhaOneAccessProvider, then render MedhaOneAccess:

import { MedhaOneAccessProvider, MedhaOneAccess } from '@medha-analytics/medha-one-access-react'

function App() {
  return (
    <MedhaOneAccessProvider
      apiUrl="https://your-medha-api.example.com"
      secretKey="your-secret-key"
      currentApplication="your-app-id"
    >
      <MedhaOneAccess />
    </MedhaOneAccessProvider>
  )
}

export default App

Styles are auto-injected — importing anything from this package pulls in dist/index.css automatically, as long as your bundler processes CSS imports from node_modules (Vite, Next.js, and Create React App all do this by default). If your setup doesn't, import it explicitly: import '@medha-analytics/medha-one-access-react/dist/index.css'.

Provider config (MedhaOneAccessConfig)

| Prop | Type | Required | Description | |---|---|---|---| | apiUrl | string | yes | Base URL of the Medha One Access API | | secretKey | string | yes | Shared secret used to sign requests (see generateToken) | | currentApplication | string | yes | Application identifier scoping access rules/artifacts | | isAdmin | boolean | no | Enables admin-only actions in the UI | | debugMode | boolean | no | Verbose request/response logging | | queryClient | QueryClient | no | Supply your own TanStack Query client instead of the library's internal one (e.g. to share a cache with the host app) |

Using individual pieces

You don't have to render the full MedhaOneAccess shell — every view, dialog, and hook is exported individually so you can compose your own layout.

Views

import {
  MedhaOneAccessProvider,
  UsersView,
  GroupsView,
  ArtifactsView,
  AccessRulesView,
} from '@medha-analytics/medha-one-access-react'

Dialogs

import {
  UserDialog,
  GroupDialog,
  ArtifactDialog,
  AccessRuleDialog,
} from '@medha-analytics/medha-one-access-react'

Hooks

import {
  useUsers, useUser, useCreateUser, useUpdateUser, useDeleteUser,
  useGroups, useGroup, useGroupMembers, useAddGroupMember, useRemoveGroupMember,
  useArtifacts, useArtifact, useArtifactGroups, useArtifactGroupContents,
  useAccessRules, useAccessRule, useCheckAccess, useValidateExpression,
  useOrgChart, useCombinedHierarchy, useArtifactCombinedHierarchy,
} from '@medha-analytics/medha-one-access-react'

All data hooks must be called from inside a MedhaOneAccessProvider — they read the API URL and HTTP client from context via useMedhaConfig / useMedhaHttp.

Shared UI primitives

Button, Badge, Input, Label, DataTable, ExpressionInput, ConfirmDialog, HierarchyTree, and the cn class-name helper are also exported, in case you want to build custom screens that match the library's look and feel.

Types

import type {
  MedhaOneAccessConfig,
  User, UserGroup, GroupMember, HierarchyNode,
  Artifact, ArtifactGroup, ArtifactHierarchyNode, Permission,
  AccessRule, TimeConstraint, ExpressionValidationResult,
} from '@medha-analytics/medha-one-access-react'

Styling notes

• The library ships with Tailwind-based styles pre-built into dist/index.css, and the built JS auto-imports it (import './index.css' / require('./index.css') runs whenever you import anything from the package). You don't need Tailwind configured in the host app.
• If your bundler doesn't process CSS imports from node_modules (rare with modern tooling, but possible with some custom webpack/esbuild setups), import the stylesheet explicitly: import '@medha-analytics/medha-one-access-react/dist/index.css'.
• If the host app also uses Tailwind, check for class-name collisions; the library's classes are scoped to its own components but share Tailwind's utility naming.

Requirements

• React 19+
• A QueryClientProvider is created automatically unless you pass your own queryClient to MedhaOneAccessProvider.

Troubleshooting

"useMedhaConfig must be used inside <MedhaOneAccessProvider>" A hook or component from this library was rendered outside the provider. Make sure MedhaOneAccessProvider wraps any tree using these hooks/views.

Invalid hook call / two copies of React Usually happens when consuming the library via npm link and the host app resolves its own react separately. See the "Local link" section in PUBLISHING.md for the fix.

Styles look unstyled / broken layout Styles are auto-injected as of this version — if you previously added a manual import '@medha-analytics/medha-one-access-react/dist/medha-one-access-react.css', remove it (that file no longer exists; it's now dist/index.css, imported automatically). If styles still don't appear, your bundler likely isn't processing CSS imports from node_modules — import @medha-analytics/medha-one-access-react/dist/index.css explicitly as a fallback.