Empty State

A placeholder to use on screens without content.

Usage

import React from "react";
import { render } from "react-dom";

import EmptyState from "@crave/farmblocks-empty-state";

const text =
  "Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Etiam porta sem malesuada magna mollis euismod.";
const imgSrc =
  "https://sourcewhatsgood.com/assets/images/utility_images/gallery-third-about-a518a29f64.jpg";

const App = () => (
  <EmptyState
    imageSrc={imgSrc}
    title="Empty State Title"
    description={text}
    actions={[
      {
        text: "Primary Action",
        onClick: () => console.log("clicked"),
        type: buttonTypes.PRIMARY,
      },
    ]}
    info={text}
  />
);

render(<App />, document.getElementById("root"));

API

| property | type | description | Required | | ----------- | ---------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- | | title | string | a text that is bold and will be rendered on the first line | Yes | | description | string | a text that will be rendered bellow title | | | imageSrc | string | image source to be rendered. This property overrides icon if both are present | | | icon | node | icon name to be rendered | | | actions | array of objects | each object corresponds to one button that will be rendered. We expect 3 required properties on each object: text (string), type(string) a valid farmblocks-theme.buttonTypes or any color, onClick (function) | | | info | string | a text that is smaller than the others and will be rendered bellow buttons | |

Peer dependencies

• prop-types
• react
• styled-components
• react-responsive
• styled-system

License

MIT