@poool/oak-addon-basic-components NPM

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),
  /* ... */
});