List of React components for Proton web-apps
"github:ProtonMail/react-components.git#semver:~1.0.0"
:warning: v.1.0.0 is not available yet, remove #semver for now
We have 3 peer dependencies:
import { Badge, Alert } from 'react-components';
There is an SVG file that is inlined as-is from the design-system.
design-system/_includes/sprite-icons.svg
For webpack, it needs to be loaded with the
svg-inline-loader. The rest of the svg files should be loaded with the
file-loader.
Get the
apifunction to perform API calls.
const api = useApi();
Get parameters
loading,
result,
error,
requestfrom the API call.
It runs automatically depending on what dependencies are specified. If
[]is given it's only run on mount. If no dependencies are given it's not run automatically.
where
fnis passed whatever arguments is passed from
request, or nothing if run from a dependency change and should return a route config object.
const { loading, result, error, request } = useApiResult(fn, [dependencies]);
Get parameters
loading,
requestfrom the API call.
Does not run automatically. Intended for
POST,
PUTrequests where a
loadingindicator is wanted.
const { loading, result, error, request } = useApiResult(fn);
where
fnis passed whatever arguments is passed from
requestand should return a route config object.
Get the
authentication. Can be used to retrieve the
UIDor the
mailboxPassword.
const { UID, login, logout, ...} = useAuthentication();
Create notifications to be displayed in the app.
const { createNotification, hideNotification } = useNotifications();const handleClick = () => { createNotification({ type: 'error', text: 'Failed to update' }); }
const handleClickPersistent = () => { const id = createNotification({ expiration: -1, // does not expire type: 'error', text: 'Failed to update' }); setTimeout(() => { hideNotification(id); }, 1000); }
Create a modal.
const { createModal } = useModals();const handleClick = async () => { const { password, totp } = await new Promise((resolve, reject) => { createModal( ); }); // use password };
Get
loadingfrom a promise.
const [loading, withLoading] = useLoading();const handleClick = async () => { await promise1; await promise2; await promise3; };
return withLoading(handleClick())} disabled={loading} />
Get all variables defined in
config.jsfile for a dedicated project.
const { CLIENT_ID, CLIENT_VERSION } = useConfig();
Get
resultand
loadingfrom an async operation that is persisted in the cache. Indexed by a unique key, and re-evaluated whenever the dependencies change.
Note: If the async operation throws, this hook will throw, so wrap the component using this hook with an ErrorBoundary if the error needs to be handled. Otherwise it will be retried when the component remounts the next time.
const [result, loading] = usePromiseResult( () => { return new Promise((resolve) => { setTimeout(() => { resolve('the result') }, 1500); }); }, [dependencies] );