Skip to content

Latest commit

 

History

History
275 lines (208 loc) · 6.43 KB

EmptyState.md

File metadata and controls

275 lines (208 loc) · 6.43 KB
sidebar_position
33

EmptyState

The EmptyState component is to be used when there is no data to display, usually after attempting to load some content from an external API. It is a container that can hold a heading and content. It can also display an image and provide a button to interact with.

Props

<EmptyState
  preset="generic"
  style={{ padding: 10 }}
  imageSource={require("../../assets/images/sad-face.png")}
  imageStyle={{ height: 400, width: 400 }}
  ImageProps={{ resizeMode: "contain" }}
  heading="EmptyState Heading"
  headingStyle={{ color: "#a511dc" }}
  HeadingTextProps={{ weight: "bold" }}
  content="EmptyState Content"
  contentStyle={{ color: "#a511dc" }}
  ContentTextProps={{ weight: "light" }}
  button="Press here"
  buttonOnPress={handleButtonPress}
/>

preset

The preset prop is used to set the preset container style of the EmptyState. This affects the default image, heading, content and button. Currently, only one preconfigured preset exists: generic. empty-state

<EmptyState preset="generic" heading="EmptyState Heading" content="EmptyState Content" />

style

The style prop is used to set the style override for the container.

<EmptyState
  style={{ padding: 10, marginTop: 20 }}
  heading="EmptyState Heading"
  content="EmptyState Content"
/>

imageSource

The imageSource prop is used to set the Image source to be displayed above the heading.

<EmptyState
  imageSource={require("../../assets/images/empty-state.png")}
  heading="EmptyState Heading"
  content="EmptyState Content"
/>

imageStyle

The imageStyle prop is used to set any style overrides to be applied to the image about the heading.

<EmptyState
  imageSource={require("../../assets/images/empty-state.png")}
  imageStyle={{ borderRadius: 5 }}
  heading="EmptyState Heading"
  content="EmptyState Content"
/>

ImageProps

The ImageProps prop is used to pass any additional props directly to the Image component. It will accept any prop that the Image component accepts.

<EmptyState
  imageSource={require("../../assets/images/empty-state.png")}
  ImageProps={{ onLoad: handleImageLoaded }}
  heading="EmptyState Heading"
  content="EmptyState Content"
/>

heading

The heading prop is used to set the heading text of the EmptyState.

<EmptyState heading="EmptyState Heading" content="EmptyState Content" button="EmptyState Button" />

headingTx

The headingTx prop is used to set the heading text of the EmptyState using a translation key.

<EmptyState
  headingTx="EmptyState:heading"
  content="EmptyState Content"
  button="EmptyState Button"
/>

headingTxOptions

The headingTxOptions prop is used to set the options for the translation key used by the headingTx prop.

<EmptyState
  headingTx="EmptyState:heading"
  headingTxOptions={{ count: 2 }}
  content="EmptyState Content"
  button="EmptyState Button"
/>

headingStyle

The headingStyle prop is used to set the style of the heading text.

<EmptyState
  heading="EmptyState Heading"
  headingStyle={{ color: "red" }}
  content="EmptyState Content"
  button="EmptyState Button"
/>

HeadingTextProps

The HeadingTextProps prop is used to pass any additional props to the heading Text component. It will accept any prop that the Text component accepts.

<EmptyState
  heading="EmptyState Heading"
  HeadingTextProps={{ size: "lg" }}
  content="EmptyState Content"
  button="EmptyState Button"
/>

content

The content prop is used to set the content text of the EmptyState.

<EmptyState heading="EmptyState Heading" content="EmptyState Content" button="EmptyState Button" />

contentTx

The contentTx prop is used to set the content text of the EmptyState using a translation key.

<EmptyState
  heading="EmptyState Heading"
  contentTx="EmptyState:content"
  button="EmptyState Button"
/>

contentTxOptions

The contentTxOptions prop is used to set the options for the translation key used by the contentTx prop.

<EmptyState
  heading="EmptyState Heading"
  contentTx="EmptyState:content"
  contentTxOptions={{ count: 2 }}
  button="EmptyState Button"
/>

contentStyle

The contentStyle prop is used to set the style of the content text.

<EmptyState
  heading="EmptyState Heading"
  content="EmptyState Content"
  contentStyle={{ backgroundColor: colors.error, color: colors.palette.neutral100 }}
  button="EmptyState Button"
/>

ContentTextProps

The ContentTextProps prop is used to pass any additional props to the content Text component. It will accept any prop that the Text component accepts.

<EmptyState
  heading="EmptyState Heading"
  content="EmptyState Content"
  ContentTextProps={{ size: "lg" }}
  button="EmptyState Button"
/>

button

The button prop is used to set the button text of the EmptyState.

<EmptyState heading="EmptyState Heading" content="EmptyState Content" button="EmptyState Button" />

buttonTx

The buttonTx prop is used to set the button text of the EmptyState using a translation key.

<EmptyState
  heading="EmptyState Heading"
  content="EmptyState Content"
  buttonTx="EmptyState:button"
/>

buttonTxOptions

The buttonTxOptions prop is used to set the options for the translation key used by the buttonTx prop.

<EmptyState
  heading="EmptyState Heading"
  content="EmptyState Content"
  buttonTx="EmptyState:button"
  buttonTxOptions={{ count: 2 }}
/>

buttonStyle

The buttonStyle prop is used to set the style overrides of the button.

<EmptyState
  heading="EmptyState Heading"
  content="EmptyState Content"
  button="EmptyState Button"
  buttonStyle={{ backgroundColor: "red" }}
/>

buttonTextStyle

The buttonTextStyle prop is used to set the style of the button text.

<EmptyState
  heading="EmptyState Heading"
  content="EmptyState Content"
  button="EmptyState Button"
  buttonTextStyle={{ color: "red" }}
/>

ButtonProps

The ButtonProps prop is used to pass any additional props to the Button component. It will accept any prop that the Button component accepts.

<EmptyState
  heading="EmptyState Heading"
  content="EmptyState Content"
  ButtonProps={{ preset: "reversed" }}
/>