Hope factory

Enhance JSX elements or third party components with Hope UI styling features.

Import

tsx
import { hope } from "@hope-ui/core";

tsx
import { hope } from "@hope-ui/core";

Usage

Hope factory serves as an object of enhanced JSX elements and also a function that can be used to enhance third-party components with Hope UI styling features.

Enhanced JSX elements

You can create base html elements with style props support using the hope.<element> notation.

The example below shows how to enhance a plain HTML button with Hope UI styling features.

tsx
<hope.button
  px={3}
  py={2}
  color="white"
  border="none"
  bg="primary.500"
  fontSize="base"
  rounded="md"
  _hover={{ bg: "primary.600" }}
>
  Click me
</hope.button>

tsx
<hope.button
  px={3}
  py={2}
  color="white"
  border="none"
  bg="primary.500"
  fontSize="base"
  rounded="md"
  _hover={{ bg: "primary.600" }}
>
  Click me
</hope.button>

Factory function

The hope() function converts non Hope UI components or JSX elements to "hope-enabled" components, so you can use features like style props with them.

Consider the Link component of the @solidjs/router package. To make it a "hope-enabled" component, you can do the following:

tsx
import { hope } from "@hope-ui/core";
import { Link } from "@solidjs/router";
const HopeLink = hope(Link);
function Example() {
  return <HopeLink href="#" color="primary.500" fontSize="sm" />;
}

tsx
import { hope } from "@hope-ui/core";
import { Link } from "@solidjs/router";
const HopeLink = hope(Link);
function Example() {
  return <HopeLink href="#" color="primary.500" fontSize="sm" />;
}