Custom Renderers

Last update

Dec 8, 2024

This codemod updates the renderElement function to include TypeScript typings and adds a default case for rendering unsupported element types.

Before (v0.88)

const renderElement = props => {
  const { element, children, attributes } = props;
  switch (element.type) {
    case 'paragraph':
      return <p {...attributes}>{children}</p>;
  }
};

After (v0.104)

import { RenderElementProps } from 'slate-react';

const renderElement = ({ element, children, attributes }: RenderElementProps) => {
  switch (element.type) {
    case 'paragraph':
      return <p {...attributes}>{children}</p>;
    default:
      return <div {...attributes}>{children}</div>;
  }
};

This codemod updates the renderElement function to include TypeScript typings and adds a default case for rendering unsupported element types.

Before (v0.88)

const renderElement = props => {
  const { element, children, attributes } = props;
  switch (element.type) {
    case 'paragraph':
      return <p {...attributes}>{children}</p>;
  }
};

After (v0.104)

import { RenderElementProps } from 'slate-react';

const renderElement = ({ element, children, attributes }: RenderElementProps) => {
  switch (element.type) {
    case 'paragraph':
      return <p {...attributes}>{children}</p>;
    default:
      return <div {...attributes}>{children}</div>;
  }
};

Build custom codemods

Use AI-powered codemod studio and automate undifferentiated tasks for yourself, colleagues or the community

Get Started Now