SitoContainer

Супер гибкий контейнер, очень похожий на контейнер @mui’s Box

Сначала!

1 — Создайте новое приложение react

Если вы используете yarn (я рекомендую его)

или если вам нравится использовать npm

если все идет хорошо, у вас будет страница, подобная этой, на localhost:3000 (если порт 3000 не занят):

Далее!

2 — Установите @emotion

Emotion — это библиотека, предназначенная для написания стилей css с помощью JavaScript. Она обеспечивает мощную и предсказуемую композицию стилей в дополнение к отличной работе разработчика с такими функциями, как карты исходников, ярлыки и утилиты тестирования. Поддерживаются как строковые, так и объектные стили.

зависимости:

или с помощью npm:

Time to CODE!

3 — Создайте свой компонент контейнера

Вы можете удалить другие файлы в папке /src, все, кроме index.js и App.js

Перейдите к вашему файлу App.js в каталоге /src, в нем вы найдете этот файл:

import logo from "./logo.svg";
import "./App.css";

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

Мы удалим все это и создадим ваш новый компонент, в данном случае компонент-контейнер, в этом руководстве это будет SitoContainer:

function SitoContainer() {
  return <div></div>;
}

export default SitoContainer;

Теперь наш контейнер должен отображать свои дочерние элементы, поэтому давайте импортируем PropTypes из prop-types

import PropTypes from "prop-types";

function SitoContainer(props) {

  const { children } = props;

  return <div>{children}</div>;
}

SitoContainer.defaultProps = {
  children: <></>,
};

SitoContainer.propTypes = {
  children: PropTypes.node,
};

export default SitoContainer;

Хорошо, теперь мы должны позволить нашим будущим пользователям настраивать наш компонент с помощью своих CSS правил, поэтому давайте добавим другие реквизиты, такие как:

• sx (styled-components like MUI)
• style (inline-style)
• className (имя класса css)

import PropTypes from "prop-types";

import { css } from "@emotion/css";

function SitoContainer(props) {
  const { children, className, sx, style } = props;

  // IMPORTANT!!!
  // this is for turn your styled-components rules as dynamic 
  // @emotion/css class
  const newSx = css({sx});

  return (
    <div className={`${className} ${newSx}`} style={style}>
      {children}
    </div>
  );
}

SitoContainer.defaultProps = {
  className: "",
  sx: {},
  style: {},
  children: <></>,
};

SitoContainer.propTypes = {
  children: PropTypes.node,
  className: PropTypes.string,
  sx: PropTypes.oneOfType([
    PropTypes.arrayOf(
      PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])
    ),
    PropTypes.func,
    PropTypes.object,
  ]),
  style: PropTypes.oneOfType([
    PropTypes.arrayOf(
      PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])
    ),
    PropTypes.func,
    PropTypes.object,
  ]),
};

export default SitoContainer;

Обратите внимание, что PropTypes реквизитов style и sx действительно утомительны, потому что эти реквизиты могут быть практически любыми.

Наш контейнер почти готов, мы можем добавить другие реквизиты, такие как:

• id (идентификатор html)
• display (flex, block, etc.) В моем случае я добавил:
• background (строка)
• fullWidth (булево)
• flexDirection (строка, столбец и т.д.).

Вы можете проверить в моем github repo

И наконец!

4 — Соберите контейнер в пучок и опубликуйте его

Создайте файл с именем .babelrc, содержащий:

{
  "presets": [
    [
      "@babel/preset-react",
      {
        "runtime": "automatic"
      }
    ]
  ]
}

Это для поддержки экспериментального синтаксиса jsx, если вы хотите посмотреть дальше, читайте здесь

Установите две dev-зависимости:

или с помощью npm:

Добавьте этот скрипт в ваш package.json:

и эту строку также в ваш package.json:

Эта последняя часть предназначена для указания npm, или yarn, где искать ваши модули, когда пользователь устанавливает их.
Используйте для локального тестирования npm install my-package, где my-package — корневая папка вашего пакета, в данном случае нашего контейнера.

Если все идет хорошо, в командной строке перейдите в корневую директорию вашего пакета и запустите для публикации вашего пакета:

дополнительные инструкции читайте здесь

Если вы хотите попробовать мой контейнер, вы можете посмотреть здесь sito-container