Comment on page

updateAppearanceOverride

This function can be used to customize the sign in modal appearance.
Usage
import React from 'react';
import { useSlashAuth } from '@slashauth/slashauth-react';
​
export const OpenSignIn_AppearanceOverride = () => {
  const { updateAppearanceOverride, openSignIn } = useSlashAuth();
​
  updateAppearanceOverride({
    signInModalStyle: {
      backgroundColor: 'pink',
    },
  });
​
  return (
    <div>
      <button onClick={() => openSignIn()}>Login</button>
    </div>
  );
};
Return Value
void
Configuration
backgroundColor (optional)
Override the background color of the signin modal.import React from 'react';
import React from 'react';
import { useSlashAuth } from '@slashauth/slashauth-react';
​
export const OpenSignIn_AppearanceOverride = () => {
  const { updateAppearanceOverride, openSignIn } = useSlashAuth();
​
  updateAppearanceOverride({
    signInModalStyle: {
      backgroundColor: 'pink',
    },
  });
​
  return (
    <div>
      <button onClick={() => openSignIn()}>Login</button>
    </div>
  );
};
borderRadius (optional)
Override the border radius of the signin modal.
import React from 'react';
import { useSlashAuth } from '@slashauth/slashauth-react';
​
export const OpenSignIn_AppearanceOverride = () => {
  const { updateAppearanceOverride, openSignIn } = useSlashAuth();
​
  updateAppearanceOverride({
    signInModalStyle: {
      borderRadius: '12px',
    },
  });
​
  return (
    <div>
      <button onClick={() => openSignIn()}>Login</button>
    </div>
  );
};

openSignIn

Next - React API & Reference

React Hooks

Last modified 10mo ago