Skip to main content
ArcBlock Community

JSON and Custom type prop on pages kit

JustHODL
Support
pages-kitqaresolved

Hi fam, I'd like to know what are the use cases for these options on pages kit properties for components. How can I use them or what is the wat to use them?

image.png

4 replies

xiaoliang22 months ago

It's a pleasure for you to use our products, let me answer your questions.

JSON ：

With the JSON option, you can maintain a JSON string, which can be used to support complex data that can be used directly as an object in a component, as shown in the following example.

image.png

The page will display the following:

image.png

Custom (Render by a Component) :

This option is used for custom properties. For scenarios where a custom data source is used, you first need to create a new custom component that selects the data, and then modify the selected value in the component via the onChange event:

image.png

javascriptCopy
import React, { useState } from '@blocklet/pages-kit/builtin/react';
import { Box, Select, MenuItem } from '@blocklet/pages-kit/builtin/mui/material';

export default function ({ value, onChange }) {
  const CITIES = [
    { value: 'new-york', label: 'New York' },
    { value: 'washington', label: 'Washington' },
    { value: 'los-angeles', label: 'Los Angeles' },
  ];

  const [selectedCity, setSelectedCity] = useState(value || '');

  const handleChange = (event) => {
    const newValue = event.target.value;
    setSelectedCity(newValue);
    onChange?.(newValue);
  };

  return (
    <Box sx={{ width: '100%' }}>
      <Select sx={{ width: '100%' }} size="small" value={value || selectedCity} onChange={handleChange}>
        {CITIES.map((city) => (
          <MenuItem key={city.value} value={city.value}>
            {city.label}
          </MenuItem>
        ))}
      </Select>
    </Box>
  );
}

Select this component in use:

image.png

We can select data from a custom data source and then use it in our code :

image.png

We hope this answers your questions and you can give us feedback if you have any.

❤️1
JustHODL22 months ago

Could you help me? I'm building a component that has the option to select between different styles using a select-list as per example but I'm having problems getting the browser to render it in production. I noticed that for some reason it is not detected as component and the styles are not applied in staging nor in production.

Could you help me find the error? I don't know if I'm missing something. you can check production at justhodl.did.life

xiaoliang22 months ago

It looks like some of the styles aren't working. Feel free to share how you set the styles. Are you using the tailwindcss?

xiaoliang22 months ago

I found a discussion of tailwindcss that can be referenced to solve this problem.

Reply