@crave/farmblocks-empty-state

Farmblocks empty state

Stats

StarsIssuesVersionUpdatedCreatedSize
@crave/farmblocks-empty-state
20235.1.13a month ago4 years agoMinified + gzip package size for @crave/farmblocks-empty-state in KB

Readme

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

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.