Getting started with Polythene for React

July 31, 2019 ยท View on GitHub

Example setup

Usage in JavaScript modules

Add Polythene to your project with npm or yarn.

Which packages do you need?

Essential:

  • react
  • react-dom
  • polythene-react

Recommended:

  • polythene-css Provides component CSS files and Material Design styles (typography and font); optionally activates CSS-in-JS more info

Optional:

  • polythene-utilities Layout helper classes more info
  • polythene-core-css CSS tools more info

Installation

npm install --save polythene-react polythene-css

Examples

A single component

import React from "react"
import { Button } from "polythene-react"
import "polythene-css"

<Button raised label="Click" />

A simple app

import React from "react"
import ReactDOM from "react-dom"
import { Button, Dialog } from "polythene-react"
import "polythene-css"
import { addTypography } from "polythene-css"

addTypography()

const App = () => (
  <div>
    <Button
      raised
      label="Show dialog"
      events={{
        onClick: () => Dialog.show({
          /* note the Dialog component is below the other elements in the app */
          title: "Hello",
          body: "Click outside to close, or press ESCAPE",
          backdrop: true
        })
      }}
    />
    <Dialog />
  </div>
)

const mountNode = document.querySelector("#app")
ReactDOM.render(<App />, mountNode)

Usage in a HTML file, JSFiddle or flems

A "standalone" version of Polythene - useful for demonstration purposes - is available at:

https://unpkg.com/polythene-react/dist/polythene-react-standalone.js

Included:

  • All components
  • All component styles, plus Material Design styles (typography and font), from polythene-css
  • subscribe, unsubscribe from polythene-core
  • Layout styles from polythene-utilities

Not included:

  • React
  • ReactDom

Setup

Add to your HTML file:

<div id="root"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.6/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.6/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/polythene-react/dist/polythene-react-standalone.js"></script>

To be able to write es6, add babel-standalone (not necessary for JSFiddle or flems):

<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js"></script>

Example script

/* global polythene */
const { Button } = polythene

const App = () =>
  <Button raised label="Button" />

ReactDOM.render(
  <App />,
  document.getElementById("root")
)

See: online flems