Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

@react-page/create-plugin-materialui

Package Overview
Dependencies
Maintainers
3
Versions
278
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@react-page/create-plugin-materialui

**This package is deprecated and no longer required**

  • 2.0.0-beta.18
  • npm
  • Socket score

Version published
Weekly downloads
27
increased by12.5%
Maintainers
3
Weekly downloads
 
Created
Source

This package is deprecated and no longer required

instead, you can declare a schema directly on any plugin:

import { CellPlugin } from '@react-page/editor';

type Data = {
  // something
}
const myPlugin: CellPlugin<Data> = {
  Renderer: ({ data }) =>
    <YourComponent data={data}/>
  id: 'plugin-id',
  title: 'Some plugin',
  description: 'This is some plugin',
  version: 1,
  controls: {
    type: 'autoform',
    schema: {
      properties: {
        // your json schema
      },
      required: [],
    },
  },
};

createPluginMaterialUi

With @react-page/create-plugin-materialui its easy to create new plugins with custom properties. It uses uniforms to create the form based on a JSONSchema you provide and will show it in a bottomToolbar similar to the other plugins.

Notice: It is in active development and its api might change, but we would love to get your feedback about it!

It will only load the form-libraries, if the Editor is in edit mode (See section in the readme about lazy load)! So don't worry about bundle size!

Example

import { createContentBase } from '@react-page/create-plugin-materialui';
import React from 'react';

const yourCustomPlugin = createContentPlugin({
  Renderer: ({ state }) => (
    <div>
      <p>I am a custom plugin</p>
      <p>this is my configuration:</p>
      <p>Firstname: {state.firstName}</p>
      <p>Lastname: {state.lastName}</p>
      <p>Age: {state.age}</p>
    </div>
  ),
  name: 'custom-content-plugin',
  text: 'Custom content plugin',
  description: 'Some custom content plugin',
  version: '0.0.1',
  // see uniforms for more information on these schemas
  schema: {
    properties: {
      firstName: { type: 'string' },
      lastName: { type: 'string' },
      age: {
        description: 'Age in years',
        type: 'integer',
        minimum: 0,
      },
    },
    required: ['firstName', 'lastName'],
  },
});

Custom form control fields

If you have a property that is more complicated like e.g. an ImageUploadField, you can pass your components to the schema, see this section on uniforms: https://uniforms.tools/docs/tutorials-creating-custom-field

Make sure that you lazy-load your custom components:

import { lazyLoad } from "@react-page/core"

const MyCustomImageUploadField = lazyLoad(() => import("./path/to/MyCustomImageUploadField));

const yourCustomPlugin = createContentPlugin({
    schema: {
      properties: {
        pictureUrl: {
            type: 'string',
            uniforms: {
                component: MyCustomImageUploadField
            }
        }
      },
    },
  });

If you don't lazy load your form components, you might increase your bundle size.

create layout plugins

its also possible to create layout plugins:

import { createLayoutPlugin } from '@react-page/create-plugin-materialui';

FAQs

Package last updated on 09 Apr 2021

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc