react-lens

Angular like simple and quick data filter / formatter to show for React.

react-lens is under development now, It is time to contribute :blush:.

If you have created your own lens and you think it is useful that should be built-in lens, then open pull-request now :zap:.

Table of Content

• Demos
• Install
• Usage / Example
• Properties
• Built-in Lenses (Filters)
• Making New Lenses (Filters)
  • Importing make
  • make Function Interface
  • renderer Callback Interface
  • An Example to Create Lens - repeater
• Development / Contributing
  • Folders and Files
  • To run dev server,
  • Source Code Writing Standarts
  • Other Scripts

Demos

Here is a simple demo for collections of built-in lenses. Go to demo page.

Install

npm install react-lens

Usage / Example

With Ecma Script 6 and React Loaders

import React from 'react';
import ReactDOM from 'react-dom';
import Lens from 'react-lens';

const Example = props => (
  <div>
    <Lens filter="currency">{5.2}</Lens>
  </div>
);

ReactDOM.render(<Example />, document.getElementById('dom_id'));

It will print $ 5.20 without any customizations. For more examples go to demo page.

Properties

• container specifies return element tag of <Lens />. Default is span.
• filter selects which lens will be used to filter / format given value.

Built-in Lenses (Filters)

• currency Formats number to show as currency. Parameters;

  1. Currency symbol. Default is $.
  2. Specifies number of decimals. Default is 2.
  3. Direction of currency symbol. Options are R and L. Default is L.

• date Formats date. Parameters;

  1. Date format. For formatting dateformat npm package is used. Default is dd.mm.yyyy.

• json Stringifies objects

• lowercase Makes string lower case

• uppercase Makes string upper case

• foreach Divides given array in to elements. Parameters;

  1. Child element tag.

Making New Lenses (Filters)

You can jump directly to An Example to Create Lens - repeater instead of reading API.

Or you can look into src/lenses - built-in lenses.

Importing make

import { make } from 'react-lens';

make Function Interface

make (lensName: string, inputType: string, rendererCallbackFunction: function): void

• lensName is lens / filter name to use as filter props of <Lens /> instance.
• inputType is type of child that will be given through <Lens />.
• renderer is called when that filter is used and the child is given as parameter.

renderer Callback Interface

rendererCallbackFunction (content: <inputType>, param1: string, param2: string ,...): string | number | React.Component | Array<React.Component>

• content is content to filter / format given as child through <Lens />.

• Other repeatable parameters comes from filter props of <Lens />. For example;

  <Lens filter="yourfilter : param1 : param2">{content}</Lens>

An Example to Create Lens - repeater

Let's make a filter that repeats given content given param times.

// File: lens-repeater.js
import { make } from 'react-lens';

make('repeater', 'string', (content, times = 2) => {
  let result = '';
  for(let i = 0; i < times; i++) {
    result += content;
  }
  return result;
});

// File: example.js
import React form 'react';
import ReactDOM form 'react-dom';
import Lens from 'react-lens';
import './lens-repeater';

ReactDOM.render(
  <div>
    <h3>Repeater Lens Example</h3>
    <Lens filter="repeater : 3">Hello</Lens>
  </div>,
  document.getElementById('dom_id')
);

It will prompt "HelloHelloHello".

By the way, have to say that, in example.js we imported ./lens-repeater. You don't have to import our lenses in each file which you use that lens. It's enough to import once in any parent or root file.

Development / Contributing

If you like to add or improve something, follow these steps.

# Change dir to your playground folder and clone repository.
git clone [email protected]:alpertuna/react-lens.git

# Enter cloned folder and install necessary development node libraries
cd react-lens
npm install

Folders and Files

• src folder keeps all source files of react-lens
• demo is playground folder to develop react-lens.

Under demo folder, index.html is index file of our web server. You don't need to touch here if you don't want to add any other external js or css files. App.js file is entry point for our react application, and you can test your alterations in here. There is a working example in App.js and it imports react-lens directly from source code, that's why there is no need to build it while developing.

To run dev server,

npm start

And open localhost:8080 in browser. Dev server uses webpack and it has hot modul replecament plugins, so when you change and save any source file, it will rebuild virtual bundle and send signal browser to refresh page automaticly.

Source Code Writing Standarts

For source code quality, I applied Airbnb rules.

Other Scripts

# Builds js dist file
npm run build-dist-js

# Builds minified js dist file
npm run build-dist-js-min

# Builds all dist files
npm run build-dist

# Lints js files according to Airbnb rules using Eslint
npm run lint-confs
npm run lint-src
npm run lint-demo

# Runs all necessary test scripts
npm test