Fans United Management Components

Fans United Management Components is a library that provides a collection of React components and utilities designed for integration with Fans United. This project is distributed as an npm package, offering a modular approach to incorporate reusable components and utilities across your React applications.

Installation

To install the package, run the following command:

npm install fansunited-management-components

Or with yarn:

yarn add fansunited-management-components

Usage

To use the components and utilities provided by Fans United Management Components, import them into your React project as needed:

import utils from 'fansunited-management-components';
import 'fansunited-management-components/style.css';

const MyComponent = () => {
	const { https, sdk } = utils.useAPIContext();
	const { Login, InformationInput, Branding } = utils.useComponentContext();

	return (
		<>
			<Login />
            <InformationInput />
            <Branding />
		</>
	);
};

const App = () => {
	const configuration = {
		apiKey: '',
		clientId: '',
		environment: '',
		language: '',
		errorHandlingMode: '',
		sportal365Project: '',
		sportal365Infrastructure: '',
	};
	const { AuthProvider, APIProvider, ComponentProvider } = utils;

	return (
		<AuthProvider environment={configuration.environment}>
			<APIProvider config={config}>
				<ComponentProvider>
					<MyComponent />
				</ComponentProvider>
			</APIProvider>
		</AuthProvider>
	);
};

Components

The package includes a variety of React components designed for easy integration. Each component is documented with examples to guide implementation.

Utilities

In addition to React components, this package includes several utility functions to assist with common tasks. These utilities are designed to work seamlessly within the Fans United ecosystem.

Configuration

To use Fans United Management Components, certain configurations are required. These configurations ensure that the components and utilities function correctly within your application. Please refer to the internal documentation or contact the project maintainer for configuration details.