puck-mui

KO | EN

gitlite — search

#ai #typescript #go #golang #deep-learning #docker #nodejs #macos #java #windows #kubernetes #awesome-list #security #pytorch

(★ 11)

Collection of MUI components for the puck editor

puck-mui 최신버젼 다운로드

최종 버전 다운로드 (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# Puck-MUI

A utility library to integrate [Material-UI (MUI)](https://github.com/mui/material-ui) components with [Puck](https://github.com/measuredco/puck), providing pre-built MUI components for use in the Puck visual editor.

## Demo

Visit [https://peoplekit.github.io/puck-mui/](https://peoplekit.github.io/puck-mui/) to try a demo.

View the demo source code [here](https://github.com/peoplekit/puck-mui/tree/main/demo).

## Overview

puck-mui provides a set of ready-to-use Material-UI components that are compatible with the Puck visual editor. These components simplify the integration of MUI into your Puck-based applications, allowing for easy customization and rapid UI development.

## Getting Started

### Step 1: Install Dependencies
First, ensure that you have both [Puck](https://github.com/measuredco/puck) and [Material-UI (MUI)](https://github.com/mui/material-ui) installed in your project. If not follow their getting started documentation.

```bash
npm install @mui/material @emotion/react @emotion/styled
```

Then install `puck-mui`

```bash
npm install puck-mui
```

### Step 2: Configure Puck and puck-mui
In your React app, import and configure puck-mui components along with the Puck editor. Here's a simple example of how to render a Puck editor using Material-UI components:

```tsx
// App.jsx
import { Config, Puck } from '@measured/puck';
import '@measured/puck/puck.css';
import { CssBaseline, ThemeProvider, createTheme } from '@mui/material';

import { config } from 'puck-mui';

// Create a custom MUI theme (optional)
const theme = createTheme({});

// Initial data structure for the editor
const initialData = {};

// Function to handle data save
const save = (data) => {
  console.log("Saved data: ", data);
};

function App() {
  return (
    <ThemeProvider theme={theme}>
      <CssBaseline />
      <Puck config={config as Config} data={initialData} onPublish={save} />
    </ThemeProvider>
  );
}

export default App;
```

## Customization - Adding Your Own Components

You can add your own custom components to the Puck editor by extending the `config` object with your own components. Here's an example of how to add a custom component to the editor:

```tsx
const customConfig = {
  ...config,
  components: {
    ...config.components,
    'custom-component': {
      label: 'Custom Component',
      fields: [...],
      defaultProps: { ... },
      render: (props) => {
        return <CustomComponent {...props} />;
      },
    },
  },
};
```

Or import the desired component from puck-mui and add it to the `config` object:
All Component matching the Material-UI component name with a prefix `P` are available in puck-mui.
```tsx
import { PDivider } from 'puck-mui';

const config = {
  components: {
    divider: PDivider,
  }
};
```

## Contributing
Contributions are welcome! If you'd like to contribute new components, features, or bug fixes to puck-mui, feel free to open an issue or submit a pull request.

puck-mui

puck-mui 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

puck-mui

puck-mui 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

Download README