Not Pictured: Mangoes

    mockschema

    0.0.5 • Public • Published

    mockschema

    npm package

    The best way to generate fake data to work with your components.


    Why should you use Mock Schema?

    • Tiny size: ~1kb
    • Save time
    • Increase productivity

    How does it work?

    When you work with Components, sometimes you don't have an API yet, but you need to populate your components with some data, like an Array of Objects. With Mock Schema, you don't need create a lot of objects manually, you just use the mock function, and the schema you define will be returned.

    Install

    Npm: npm install mockschema
    CDN: https://unpkg.com/mockschema@0.0.4

    Real life example:

    import {h, Component, render} from 'preact';
     
    import Appbar from 'preact-mui/lib/appbar';
    import Button from 'preact-mui/lib/button';
    import Container from 'preact-mui/lib/container';
     
    import { mock, createSchema } from 'mockschema';
     
    createSchema({
      person: {
        id:0, 
        name:'John Doe', 
        age: 25
      }
    })
     
    class Example extends Component {
      render() {
        return (
          <div>
            <Appbar></Appbar>
            <Container fluid={true}>
            {/** 
              * mock will return an Array with 10 objects
              * the id will be auto incremented for you
              */}
              {mock('person', 10).map( person => (
                <div>{person.id} {person.name}</div>
              ))}
              <Button color="primary">button</Button>
            </Container>
          </div>
        );
      }
    }
     
    render(<Example />, document.getElementById('example'));

    API

    Create a Schema

    • Create a Schema that will be used in your application
    /**
     * @name createSchema
     * @description Create an Schema of your fake data
     * @param {Object} schema The schema
     */
     
    // store/index.js
    import {createSchema} from 'mockschema';
     
    createSchema({
      posts: {
        id: '1',
        title: 'Foo Bar',
        author: 'John Doe'
      },
      animals: {
        id: 1,
        list: ['Cat', 'Dog', 'Bird']
      }
    });

    Generate your Schema

    • Always return an array with the quantity of objects passed in the function. The id attribute will be incremented automatically by Mock Schema.
    /**
      * @name mock
      * @description Generate a schema
      * @param {String | Object} schema The Object Schema
      * @param {Intenger} How many objects you want to render
      * @return {Array} An array with your schema objects
      **/
     
    // state/index.js
    import { mock } from 'mock-schema';
     
    // If you create a Schema, you can use it like this
    mock('posts', 5); // -> [{id:1, title: 'Foo Bar', author: 'Jhon Doe'}, {id:2, title: 'Foo Bar', author: 'Jhon Doe'}, ...]
     
    // Or, you can pass mock an Object instead like this
    mock({ name: 'John Doe', type: 'Person'}, 5); // -> [{id:1, name:'John Doe', type: 'Person'}, {id:2, name:'John Doe', type: 'Person'}, ...]
     

    Keywords

    none

    Install

    npm i mockschema

    DownloadsWeekly Downloads

    1

    Version

    0.0.5

    License

    MIT

    Last publish

    Collaborators

    • luisvinicius167