Function withIf

renders conditionally

It could have a better name

Example

const AdminDashboard: React.FC = () => {
  return <>...</>
}
const SafeAdminDashboard = withIf<"isAdmin", boolean>("isAdmin")(AdminDashboard)

// renders <AdminDashboard />
<SafeAdminDashboard isAdmin={true} />

// renders null
<SafeAdminDashboard isAdmin={false} />
Copy

Example

const HappyScreen: React.FC = () => {
  return <>...</>
}
const BlueErrorScreen: React.FC = () => {
  return <>...</>
}
const NewComponent = withIf("error", {
  Else: BlueErrorScreen
})(HappyScreen)

// renders <HappyCase />
<NewComponent error={null} />

// renders <BlueErrorScreen />
<NewComponent error={new Error("some error")} />
Copy

Example

type HappinessLevel = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10;
const HappyScreen: React.FC = () => {
  return <>...</>
}
const SadScreen: React.FC = () => {
  return <>...</>
}
const MoodScreen = withIf<{ happinessLevel: HappinessLevel }>(
  ({ happinessLevel }) => happinessLevel >= 5,
  {
    dependencyNames: ["happinessLevel"],
    Else: SadScreen,
  },
)(HappyScreen);

// renders <HappyScreen />
<MoodScreen happinessLevel={10} />

// renders <SadScreen />
<MoodScreen happinessLevel={3} />
Copy

renders conditionally

It could have a better name

Example

const AdminDashboard: React.FC = () => {
  return <>...</>
}
const SafeAdminDashboard = withIf<"isAdmin", boolean>("isAdmin")(AdminDashboard)

// renders <AdminDashboard />
<SafeAdminDashboard isAdmin={true} />

// renders null
<SafeAdminDashboard isAdmin={false} />
Copy

Example

const HappyScreen: React.FC = () => {
  return <>...</>
}
const BlueErrorScreen: React.FC = () => {
  return <>...</>
}
const NewComponent = withIf("error", {
  Else: BlueErrorScreen
})(HappyScreen)

// renders <HappyCase />
<NewComponent error={null} />

// renders <BlueErrorScreen />
<NewComponent error={new Error("some error")} />
Copy

Example

type HappinessLevel = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10;
const HappyScreen: React.FC = () => {
  return <>...</>
}
const SadScreen: React.FC = () => {
  return <>...</>
}
const MoodScreen = withIf<{ happinessLevel: HappinessLevel }>(
  ({ happinessLevel }) => happinessLevel >= 5,
  {
    dependencyNames: ["happinessLevel"],
    Else: SadScreen,
  },
)(HappyScreen);

// renders <HappyScreen />
<MoodScreen happinessLevel={10} />

// renders <SadScreen />
<MoodScreen happinessLevel={3} />
Copy