@asgardeo/nextjs
Version:
Next.js implementation of Asgardeo JavaScript SDK.
75 lines • 2.58 kB
JavaScript
/**
* Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com).
*
* WSO2 LLC. licenses this file to you under the Apache License,
* Version 2.0 (the "License"); you may not use this file except
* in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing,
* software distributed under the License is distributed on an
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
* KIND, either express or implied. See the License for the
* specific language governing permissions and limitations
* under the License.
*/
'use client';
import { jsx as _jsx } from "react/jsx-runtime";
import { useEffect, useState } from 'react';
import { BaseOrganizationList, useOrganization, } from '@asgardeo/react';
/**
* OrganizationList component that provides organization listing functionality with pagination.
* This component uses the enhanced OrganizationContext, eliminating the polling issue and
* providing better integration with the existing context system.
*
* @example
* ```tsx
* import { OrganizationList } from '@asgardeo/react';
*
* // Basic usage
* <OrganizationList />
*
* // With custom limit and filter
* <OrganizationList
* limit={20}
* filter="active"
* onOrganizationSelect={(org) => {
* console.log('Selected organization:', org.name);
* }}
* />
*
* // As a popup dialog
* <OrganizationList
* mode="popup"
* open={isOpen}
* onOpenChange={setIsOpen}
* title="Select Organization"
* />
*
* // With custom organization renderer
* <OrganizationList
* renderOrganization={(org) => (
* <div key={org.id}>
* <h3>{org.name}</h3>
* <p>Can switch: {org.canSwitch ? 'Yes' : 'No'}</p>
* </div>
* )}
* />
* ```
*/
export const OrganizationList = ({ autoFetch = true, filter = '', limit = 10, onOrganizationSelect, recursive = false, ...baseProps }) => {
const { getAllOrganizations, error, isLoading, myOrganizations } = useOrganization();
const [allOrganizations, setAllOrganizations] = useState({
organizations: [],
});
useEffect(() => {
(async () => {
setAllOrganizations(await getAllOrganizations());
})();
}, []);
return (_jsx(BaseOrganizationList, { allOrganizations: allOrganizations, myOrganizations: myOrganizations, error: error, isLoading: isLoading, onOrganizationSelect: onOrganizationSelect, ...baseProps }));
};
export default OrganizationList;
//# sourceMappingURL=OrganizationList.js.map