A small library for previewing react components

react-native-component-preview

A small typescript library for previewing react-native components.

With this library we can render components using different props to see how they look in a different state. Opinionated Pros:

  • Faster Development flow as you can see multiple components rendering with different props at once.
  • Enforces of separation between UI and business logic. Smaller files, better readablity.
  • Testable components & code.

How To.

import {ComponentPreviewBuilder, ComponentPreviews} from 'react-native-component-preview';

// Build component previews using a provided builder.
export const postContentPreview = new ComponentPreviewBuilder('Post Content', PostContent)
  .withPreview({
    contentText: '',
  })
  .withPreview({
    contentText: 'Hello World',
  })
  .build();

// Put all of the previews into an array.
const previews = [postContentPreview];

// Renders Component Previews Screen
const PreviewScreen = <ComponentPreviews previews={previews} />

GitHub

View Github