@poool/oak-addon-basic-components

🌳 oak

oak-addon-basic-components

A collection of basic components to be used with the infamous page builder

Content

New components:

• Title: Allows to add pre-made hx headers (h1, h2, ...) to your content
• Text: Basic text node managed with a textarea field
• Image: Basic image component uploaded using image field type
• Button: Basic HTML button/link component

New field types:

• image: Allows to upload an image and use it inside an element (uses oak's onImageUpload event)

Installation

yarn add @poool/oak @poool/oak-addon-basic-components

Usage

import { render } from '@poool/oak';
import basicComponents from '@poool/oak-addon-basic-components';

render(document.getElementById('app'), {
  addons: [basicComponents],
  /* ... */
});

Don't forget to import styles, for example using style-loader and webpack:

import '@poool/oak-addon-basic-components/dist/oak-addon-basic-components.min.css';

Or import them directly inside your own styles using less, sass or stylus:

@import "@poool/oak-addon-basic-components/dist/oak-addon-basic-components.min.css";

Translations

Available languages:

• English (default)
• French

To import translations and replace text with translations, use the texts setting:

import { render, localeFr } from '@poool/oak';
import basicComponents, { localeFr as basicLocaleFr } from '@poool/oak-addon-basic-components';
import { mergeDeep } from '@poool/junipero-utils';

render(document.getElementById('app'), {
  addons: [basicComponents],
  texts: mergeDeep({}, localeFr, basicLocaleFr),
  /* ... */
});

Contributing

Please check the CONTRIBUTING.md doc for contribution guidelines.

License

This software is licensed under MIT.