https://github.com/bryanbraun/checkboxland

Render anything as HTML checkboxes
https://github.com/bryanbraun/checkboxland

Last synced: 7 days ago
JSON representation

Render anything as HTML checkboxes

• Host: GitHub
• URL: https://github.com/bryanbraun/checkboxland
• Owner: bryanbraun
• License: mit
• Created: 2020-02-18T15:38:02.000Z (almost 5 years ago)
• Default Branch: main
• Last Pushed: 2022-06-27T03:17:14.000Z (over 2 years ago)
• Last Synced: 2024-12-28T23:32:55.827Z (14 days ago)
• Language: JavaScript
• Homepage: https://bryanbraun.com/checkboxland
• Size: 6.85 MB
• Stars: 948
• Watchers: 8
• Forks: 43
• Open Issues: 7
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome - bryanbraun/checkboxland - Render anything as HTML checkboxes (JavaScript)

README

        
# Checkboxland





Checkboxland is a JavaScript library for rendering anything as HTML checkboxes.

You can use it to display animations, text, images, video, and arbitrary data. It also supports plugins, so you can add your own APIs.

Checkboxland is dependency-free, framework-agnostic, and fun! 🙃

**[For more details see the docs.](https://bryanbraun.com/checkboxland)**

## Setup

Install this package via npm:

```

npm install checkboxland

```

## Example

Import it into your application, and create a checkbox grid:

```

import { Checkboxland } from 'checkboxland';

const cbl = new Checkboxland({ dimensions: '8x7', selector: '#my-container' });

// Create a data representation of the heart.

const heart = [

  [0,1,1,0,0,1,1,0],

  [1,0,0,1,1,0,0,1],

  [1,0,0,0,0,0,0,1],

  [1,0,0,0,0,0,0,1],

  [0,1,0,0,0,0,1,0],

  [0,0,1,0,0,1,0,0],

  [0,0,0,1,1,0,0,0],

];

// This updates the grid with the data we provided.

cbl.setData(heart);

```



## Contributing

Checkboxland is designed to be extendable. If you want to add a feature, first ask yourself if it could be done as an external plugin.

If you contribution requires a change to the core library, follow these steps:

1. Fork/Clone the repo.

2. Make your changes on a feature branch.

3. Run the docs site locally (`npm run dev`) to confirm that the demos still work as expected.

4. Submit a Pull Request.

## License

MIT