https://github.com/leguass7/rollcolumn-react

https://github.com/leguass7/rollcolumn-react

Last synced: 6 days ago
JSON representation

• Host: GitHub
• URL: https://github.com/leguass7/rollcolumn-react
• Owner: leguass7
• License: mit
• Created: 2020-03-20T23:03:11.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2023-03-04T07:15:26.000Z (over 1 year ago)
• Last Synced: 2023-03-04T20:23:26.867Z (over 1 year ago)
• Language: JavaScript
• Size: 455 KB
• Stars: 0
• Watchers: 2
• Forks: 0
• Open Issues: 2
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        



  



# rollcolumn-react

[![NPM](https://img.shields.io/npm/v/rollcolumn-react.svg)](https://www.npmjs.com/package/rollcolumn-react)[![License: MIT](https://img.shields.io/github/license/avatarsolucoes/rollcolumn-react.svg)](LICENSE)

> React **web** component

view in production: http://rollcolumn-react.avatarsolucoesdigitais.com.br

## Install

```bash

yarn add rollcolumn-react

```

or

```bash

npm i rollcolumn-react

```

## Usage

**with label:**

```jsx

import React from 'react'

import RollColumn, { Column, LabelColumn } from 'rollcolumn-react'

export default function Page() {

  return (

    


      

        

          
Content 1

          goto 2

        

        

          
Content 2

          back to 1

        

      

    

  )

}

```


**external navigation (without label component):**

```jsx

import React from 'react'

import RollColumn, { Column, LabelColumn, gotoColumn } from 'rollcolumn-react'

export default function Page() {

  function goto(columnNumber) {

    gotoColumn('myName', columnNumber)

  }

  return (

    


      

        

          
Content 1

          goto 2

          


           { goto(2) }}>GOTO 2

        

        

          
Content 2

          back to 1

          


           { goto(1) }}>GOTO 1

        

      

      


        
other content

         { goto(2) }}>GOTO 2

      

    

  )

}

```


**events:**

```jsx

import React from 'react'

import RollColumn, { Column, LabelColumn, gotoColumn } from 'rollcolumn-react'

export default function Page() {

  function handleColumnCheck(elementChecked){

    console.log('handleColumnCheck', elementChecked);

  }

  function goto(columnNumber) {

    // gotoColumn params: (name, number_column, emit_event)

    gotoColumn('myName', columnNumber, true)

  }

  return (

    


      

        

          
Content 1

          goto 2

          


           { goto(2) }}>GOTO 2

        

        

          
Content 2

          back to 1

          


           { goto(1) }}>GOTO 1

        

      

      


        
other content

         { goto(2) }}>GOTO 2

      

    

  )

}

```


## Contributing

Thanks for being interested on making this package better. We encourage everyone to help improving this project with some new features, bug fixes and performance issues.

## License

MIT © [Avatar Soluções Digitais](https://github.com/avatarsolucoes/rollcolumns-react.git)