@crave/farmblocks-empty-state

Empty State

A placeholder to use on screens without content.

Design specs

• Neutral Empty State
• Customized Empty State
• In Section - Empty States

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}
    primaryActionText="Primary Action"
    onPrimaryActionClick={() => console.log("clicked")}
    info={text}
  />
);

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

API

• Thumbnail: imageSrc
• Text properties: title(required), description, info
• Primary Button: primaryActionText, onPrimaryActionClick
• Secondary Button: secondaryActionText, onSecondaryActionClick

License

MIT