Skip to content

ealush/react-format-props

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

2 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

React Format Props

A tiny props formatter for React. How tiny? Here's the whole source:

import React from 'react';

export default (mapper = (props) => props) => (Comp) => (props) => <Comp {...mapper(props)}/>;

Installation

npm i react-format-props

Why?

I needed it.

What is it?

It is a tiny connector for your React components, it allows you to wrap your components with this formatter, to which you can pass a *mapper function. Use it to do all the manipulations on the props you would normally do inside your component. This laeves your components side effects free and much easier to read.

*mapper is basically mapPropsToProps (Yeah, that's not a mistake. You are mapping your props to new ones).

Why use it?

Cleaner components.

Any examples?

Let's say we want to use moment.js to format a date passed down via props.

import React from 'react';
import format from 'react-format-props';
import moment from 'moment';

const HumanReadableTime = ({ dateTime }) => (<time>{dateTime}</time>);
// dateTime prop will be the formatted datetime

export default format((props) => ({
    ...props,
    dateTime: moment(props.dateTime).format( "YYYY-MM-DD HH:mm:ss")
}))(HumanReadableTime);

This is basically Redux's connect, just without the provider.

Disclaimer

I am probably not the first person to use it this way. This snippet can probably be found somewhere on the internet. I couldn't find it within 1 minute on Gooogle so I put it here for others to find it more easily.

About

A tiny props formatter for React

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published