react-localist-viewer

React component - Uses localist api to view events

Usage no npm install needed!

<script type="module">
  import reactLocalistViewer from 'https://cdn.skypack.dev/react-localist-viewer';
</script>

README

react-localist-viewer

A react component to pull localist calendar events and render.

Drupal Block example | ES6 demo

Getting Started

These instructions will get you a copy of the project up and running on your local machine for development and testing purposes. See deployment for notes on how to deploy the project on a live system.

The rendered view does not come with any styling. A starter stlyle sheet can be found here

Prerequisites

This was made with react creat app Development requires Node and NPM. See create react app for more info.

Installing

with NPM

npm install --save react-localist-viewer

or download directly from Github Repo.

git clone https://github.com/philwilliammee/react-localist-viewer

Using

import {LocalistComponent} from 'react-localist-viewer';
<LocalistComponent
    target= {target}
    depts= {depts}
    entries= {entries}
    daysahead= {daysahead}
    format= {format}
    group= {group}
    keyword= {keyword}
    heading= {heading}
    filterby= {filterby}
    calendarurl= {calendarurl}
    apikey= {apikey}
    hideaddcal= {hideaddcal}
    hidedescription= {hidedescription}
    truncatedescription= {truncatedescription}
    hideimages= {hideimages}
    hidepagination = {hidepagination}
    wrapperclass= {wrapperclass}
    listclass= {listclass}
    itemclass= {itemclass}
    readmore= {readmore}
    url= {url}
/>

Developing

Development to compile sass and javascript.

copy the files in example_localist_settings.json and renam it to local_settings.json and configure with your settings for testing.

cd ./react-localist-viewer
npm install
npm run start

After you start /src/index.js will Initialize the app, and load example data/configuration. The app is highly configurable see src/lib/localist.jsx Proptype deifintions for all configuration options.

Running the tests

npm run jest

check for test coverage:

npm run coverage

Break down into end to end tests

  • React-localist-viewer should initialise with test props.

  • LocalistConnector should fetch JSON.data

  • The data should be rendered with selected props.

And coding style tests

This module follows react create app coding standards.

see the .eslintrc.json file for linting details.

Deployment

npm run build to compile for npm package. The process for converting to npm package can be found here

Versioning

For the versions available, see the tags on this repository and tags on this npm.

Authors

Phil Williammee - philwilliammee

See also the list of contributors who participated in this project.

License

This project is licensed under the GNU General Public License v3.0 - see the LICENSE.md file for details

Acknowledgments