@crave/farmblocks-empty-state

5.1.16 • Public • Published

logo-farmblocks

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

Package Sidebar

Install

npm i @crave/farmblocks-empty-state

Weekly Downloads

349

Version

5.1.16

License

MIT

Unpacked Size

41.3 kB

Total Files

10

Last publish

Collaborators

  • viniciusmartin
  • luis.nascimento
  • seocam
  • vnakamura
  • alcferreira
  • imwra