astro-portabletext
TypeScript icon, indicating that this package has built-in type declarations

0.10.0 • Public • Published
astro-portabletext logo

astro-portabletext

license npm

 

Render Portable Text with Astro.

Open in StackBlitz Open with CodeSandbox

 

Table of Contents

 

Getting Started

Install

$ npm install astro-portabletext
# $ pnpm add astro-portabletext
# $ yarn add astro-portabletext

Usage

Import Description
astro-portabletext For PortableText component.
See PortableText Component for details.
astro-portabletext/components For Block, List, ListItem and Mark components.
See Extending Components for details.
astro-portabletext/types For Typescript types
astro-portabletext/utils For utility functions
/* .astro file */
---
import { PortableText } from "astro-portabletext";
---

<PortableText
  value=/* Required */
  components=/* Optional */
  onMissingComponent=/* Optional */
  listNestingMode=/* Optional */
/>

astro-portabletext components will render the following:

{
  type: {
    /* custom types go here */
  },
  block: {
    h1: /* <h1 {...attrs}><slot /></h1> */,
    h2: /* <h2 {...attrs}><slot /></h2> */,
    h3: /* <h3 {...attrs}><slot /></h3> */,
    h4: /* <h4 {...attrs}><slot /></h4> */,
    h5: /* <h5 {...attrs}><slot /></h5> */,
    h6: /* <h6 {...attrs}><slot /></h6> */,
    blockquote: /* <blockquote {...attrs}><slot /></blockquote> */,
    normal: /* <p {...attrs}><slot /></p> */
  },
  list: {
    bullet: /* <ul {...attrs}><slot /></ul> */,
    number: /* <ol {...attrs}><slot /></ol> */,
    menu: /* <menu {...attrs}><slot /></menu> */,
  },
  listItem: {
    bullet: /* <li {...attrs}><slot /></li> */,
    number: /* <li {...attrs}><slot /></li> */,
    menu: /* <li {...attrs}><slot /></li> */,
  },
  mark: {
    code: /* <code {...attrs}><slot /></code> */,
    em: /* <em {...attrs}><slot /></em> */,
    link: /* <a {...attrs} href="..."><slot /></a> */,
    'strike-through': /* <del {...attrs}><slot /></del> */,
    strong: /* <strong {...attrs}><slot /></strong> */,
    underline: /* <span {...attrs} style="text-decoration: underline;"><slot /></span> */
  },
  hardBreak: /* <br /> */,
}

 

Documentation

Refer to docs page for advanced usage and examples, including implementation with Sanity.

 

License

ISC

Package Sidebar

Install

npm i astro-portabletext

Weekly Downloads

1,962

Version

0.10.0

License

ISC

Unpacked Size

26.2 kB

Total Files

22

Last publish

Collaborators

  • theisel