Neophobe Plebeian Mumpsimus

    react-accounting-diary
    TypeScript icon, indicating that this package has built-in type declarations

    0.1.1 • Public • Published

    react-accounting-diary

    ✂️ Component making to generate a accounting diary and export image.

    Accounting Diary Generator

    This project was created and is compatible with React library.

    Available Scripts

    In the project directory, you can run:

    Install

    npm i --save accounting-diary

    or

    yarn add accounting-diary

    Usage

    import React from "react";
    import AccountingDiary from 'react-accounting-diary/dist/components/AccountingDiary'
    
    function App() {
     return (
       <div>
         <AccountingDiary/>
       </div>);
    }
    export default App;

    Just by the insertion of the component your will be able to work and create your model of accounting diary. But if you want to personalise it your can go with the following example code:

    Examples:

    import React from "react";
    import AccountingDiary from 'react-accounting-diary/dist/components/AccountingDiary'
    
    function App() {
     return (
       <div>
         <AccountingDiary
           title='My new test in dev'
           account={{
             width: 120,
             color:'#ff00ff'
           }}
           amount={{
             width: 120
           }}/>
       </div>);
    }
    export default App;

    Properties

    Name Description
    saveColor Hex color, default: #ffffff use to set the color of the button that generate the export image of the the diary
    addColor Hex color, default: #ffffff use to set the color of the button used to add operation in the document
    saveIcon Hex color default: use to set the icon of the button that generate the export image of the the diary
    The libraries use to set the svg icon is react-feather
    title Title of the the accounting-diary
    account Object element use to set behaviour of the account number part in the diary: see below
    amount Object element use to set behaviour of the amount part in the diary: see below
    setBase64 this a the most important for those who want to use the exported image in a variable. the juste have to specify the function which is reponsible for the setting of a state value.: see example below
    Account & Amount
    Name Description
    width Cell width in the diary
    color Text color in the cell

    Using of setBase64 in Hook component

    function App() {
      const [base64, setBase64] = useState()
      return (
        <div>
          <AccountingDiary
            setBase64={setBase64}
            title='My new test in dev'
            account={{
              width: 120,
              color:'#ff00ff'
            }}
            amount={{
              width: 120
            }}/>
        </div>
      );
    }
    export default App;

    Using of setBase64 in class component

    class App extends Component {
      state = {
        base64: ''
      }
      render() {
        return (
          <div>
            <AccountingDiary
              setBase64={e => this.setState({base64: e})}
              title='My new test in dev'
              account={{
                width: 120,
                color: '#ff00ff'
              }}
              amount={{
                width: 120
              }}/>
          </div>
        );
      }
    }
    export default App;

    Changelog


    v0.1.1

    • Linkedin profile

    v0.1.0

    • Adding the properties' schema of each component
    • Put setBase64() in the property of component which is a element listener use to set an output variable which should contain the exported image value that should be used in document
    • Give the ability to delete an operation in the array

    Creators

    Ruthel

    Contributing

    Please let us know how can we help. Do check out issues for bug reports or suggestions first. To become a contributor, please follow our contributing guide.

    Copyright and license

    Code and documentation copyright 2021–2022 the react-accounting-diary Authors and Twitter, Inc. Code released under the MIT License.

    Install

    npm i react-accounting-diary

    DownloadsWeekly Downloads

    329

    Version

    0.1.1

    License

    MIT

    Unpacked Size

    37.7 kB

    Total Files

    14

    Last publish

    Collaborators

    • ruth3rl