@fractal-components/toggle-button
v1.1.1
Published
A sample UI component built using `fractal-component`
Downloads
12
Maintainers
t83714Readme
A Sample ToggleButton UI Component
Overview
This is a sample UI Component built using fractal-component to demonstrate its reusability.
Quick Start
To try it out, simply create a HTML file with the following content (also available on CodePen):
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Toggle Button Demo</title>
<!--
Load `babel-standalone` to support JSX in script tag
-->
<script src="https://unpkg.com/@babel/standalone@^7.0.0/babel.min.js"></script>
<script src="https://unpkg.com/react@~16.8.0/umd/react.production.min.js"></script>
<script src="https://unpkg.com/prop-types@~15.6.2/prop-types.min.js"></script>
<script src="https://unpkg.com/react-dom@~16.8.0/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/redux-saga@~1.0.0/dist/redux-saga.umd.min.js"></script>
<script src="https://unpkg.com/fractal-component@latest/dist/fractal-component.min.umd.js"></script>
<script src="https://unpkg.com/[email protected]/dist/jss.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/jss-preset-default.min.js"></script>
<script src="https://unpkg.com/@fractal-components/toggle-button@latest/dist/@fractal-components/toggle-button.min.umd.js"></script>
</head>
<body>
<div id="app_root"></div>
<script type="text/babel">
const appContainer = new FractalComponent.AppContainer({
reduxDevToolsDevOnly: false
});
ReactDOM.render(
<FractalComponent.AppContainerContext.Provider
value={appContainer}
>
<ToggleButton.default />
</FractalComponent.AppContainerContext.Provider>,
document.getElementById("app_root")
);
</script>
</body>
</html>You can also use it as ES6 module:
import "@babel/polyfill";
import React from "react";
import ReactDOM from "react-dom";
import { AppContainer, AppContainerContext } from "fractal-component";
import ToggleButton, { actions, actionTypes } from "@fractal-components/toggle-button";
const appContainer = new AppContainer({
reduxDevToolsDevOnly: false
});
ReactDOM.render(
<AppContainerContext.Provider value={appContainer}>
<ToggleButton />
</AppContainerContext.Provider>,
document.getElementById("root")
);API / Interface
Component Properties
- namespacePrefix: String. Optional. Used to extend component's namespace (without impact component's internal namespace) so that two components' namespaces have a common part. It will impact the action multicast dispatch.
- pattern: String, function or array. pattern of accepting action types. "*" stands for all types.
- relativeDispatchPath: the relative action dispatch namespace path. ".." stands for up one level. "../.." stands for up two levels etc.
- transformer: symbol or function: convert received actions to a new action type.
- styles: Can used to replace the built-in styling. Accepts JSS styling object
Action Interface
Outgoing Actions
- All Actions Types: This component works as an ActionForwarder that will accept all possible actions, transform and forward to another namespace.
Accepted Actions
- All Action Types: This component works as an ActionForwarder that will accept all possible actions, transform and forward to another namespace.