react-scrabblefy

A react component that converts a word to Scrabble tiles. You can view a demo at https://codesandbox.io/s/3x9w40mq3m.

Credits

The code for the styling and tilting of the Scrabble tiles came from a wonderful CodePen by James Holmes, which you can find here: https://codepen.io/32bitkid/pen/NPEgbx. I adapted his work in order to make this a reusable React component. You can pass down additional props to the Scrabblefy container, as well as to each letter tile.

Installation

1. Run npm i react-scrabblefy
2. Include react-scrabblefy in your project: import Scrabblefy from 'react-scrabblefy'
3. Usage: <Scrabblefy word="SCRABBLEFY" size={50} align="left" />

Options

Scrabblefy accepts two options:

1. word: REQUIRED
   The string you want to convert.
2. size: OPTIONAL The desired tile size in pixels - just pass a number (defaults to 50)!
3. align: OPTIONAL Whether the tiles should align 'left', 'center', or 'right' (defaults to center).
4. straight: OPTIONAL Whether the tiles should be straight or randomly tilted (defaults to true).
5. tileProps: OPTIONAL Additional props that will be spread to each letter tile.