React T-Fractal

React component for displaying t-fractals. The idea is borrowed from T-square fractal (wikipedia) and this article (Russian).

Install

npm install --save react-tfractal

Don't forget to manually install React^0.14 (peer dependency) if you're using npm@3.

Use

ES6

import React from 'react';
import ReactDOM from 'react-dom';
import Tfractal from 'react-tfractal';
 
const configuration = {
  colorMap: [
    ['#E91E63', '#FFFFFF', '#FFFFFF'],
    ['#FFFFFF', '#FFFFFF', '#E91E63'],
    ['#FFFFFF', '#E91E63', '#FFFFFF'],
  ],
  cellSize: 8,
  layers: 4,
  background: '#FFFFFF',
  opacity: 0.5,
};
 
ReactDOM.render(
  <Tfractal
    {...configuration}
    style={{ width: 300, height: 200 }}
  />,
  document.getElementById('app')
);

ES5

var Tfractal = require('react-tfractal');
...

Good old 1998 Script Tag:

The component depends on React ^0.14 (a introduction of stateless components), so if you're using it without a build step, React ^0.14 must be present as a global.

<script src="https://npmcdn.com/react@^0.14/dist/react.min.js"></script>
<script src="https://npmcdn.com/react-dom@^0.14/dist/react-dom.min.js"></script>
<script src="https://npmcdn.com/react-tfractal"></script>

Codepen example

http://codepen.io/aush/pen/QyojOb

Demo app

https://tfractal.herokuapp.com