How to use in Block Editor – react-bootstrap?

Question

I want to use in Guttenberg block some of tools used in react-bootstrap but something not work in my code property.

First I npm install react-bootstrap bootstrap15eme Doctor.1.3 the newest version, and this is register in package.json as well. Then in edit.js I try to import all dependencies:

 import { useBlockProps, InnerBlocks } from 'wordpress user/block-editor';
 import Card from 'react-bootstrap/Card';
  import React, { Component } from "react";
  import { IWPGBlock } from 'react-gutenberg/'
import * as React from 'react'

and for sure that I made it correctly use an example from react’s page.

export default function Edit() {

     return (
         <p {...useBlockProps()}>
<Card style={{ width: '18rem' }}>
  <Card.Img variant="top" src="holder.js/100px180" />
  <Card.Body>
    <Card.Title>Card Title</Card.Title>
    <Card.Text>
      Some quick example text to build on the card title and make up the bulk of
      the card's content.
    </Card.Text>
    <Button variant="primary">Go somewhere</Button>
  </Card.Body>
</Card>

         </p>
     );
 }

unfortunetelly, it did not work. I have no clue what I should change, can you give me a feedback?

0
kamil danilski 5 months 2022-03-08T18:42:42-05:00 0 Answers 0 views 0

Leave an answer

Browse
Browse