Компонент Benefit

Установка

npm i @megalabs/react-benefit

Параметры <Benefit>

| propName | propType | defaultValue | isRequired | Description | | ------------ | -------------|------------------|----------------|----------------------------------------- | | title | String | | | Заголовок | | icon | String | | | Иконка слева от заголовка | | text | String | | | Текст под заголовком |

Пример использования

import React, { Component } from 'react';
import {Benefits} from '@megalabs/react-benefits';
const data={ "items": [
	{
		"imgLink": "/icons/Family_24.svg",
		"title": "",
		"text": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia sed neque magnam. Recusandae velit praesentium distinctio quod ad quidem delectus modi corporis itaque, nemo quos quae neque dolore hic quis."
	},
	{
		"imgLink": "/icons/Edit_24.svg",
		"title": "",
		"text": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia sed neque magnam. Recusandae velit praesentium distinctio quod ad quidem delectus modi corporis itaque, nemo quos quae neque dolore hic quis."
	},
	{
		"imgLink": "/icons/Video_24.svg",
		"title": "",
		"text": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia sed neque magnam. Recusandae velit praesentium distinctio quod ad quidem delectus modi corporis itaque, nemo quos quae neque dolore hic quis."
	},
	{
		"imgLink": "/icons/Social_24.svg",
		"title": "",
		"text": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia sed neque magnam. Recusandae velit praesentium distinctio quod ad quidem delectus modi corporis itaque, nemo quos quae neque dolore hic quis."
	},
	{
		"imgLink": "/icons/Call_slider_24.svg",
		"title": "",
		"text": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia sed neque magnam. Recusandae velit praesentium distinctio quod ad quidem delectus modi corporis itaque, nemo quos quae neque dolore hic quis."
	},
	{
		"imgLink": "/icons/MegaFon-TV_24.svg",
		"title": "",
		"text": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia sed neque magnam. Recusandae velit praesentium distinctio quod ad quidem delectus modi corporis itaque, nemo quos quae neque dolore hic quis."
	}
]}
class App extends Component {
  render() {
    return (
			<div className="App">
				<Benefits benefits={data.items}/>
      </div>
    );
  }
}

export default App;

Использование отдельного элемента

	import React, { Component } from 'react';
	import {Benefit} from '@megalabs/react-benefits';

	class App extends Component {
		render() {
			return (
				<div className="App">
				<Benefit icon={`ссылка на svg иконку`} title="Заголовок" text="Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia sed neque magnam. Recusandae velit praesentium distinctio quod ad quidem delectus modi corporis itaque, nemo quos quae neque dolore hic quis."/>
				</div>
			);
		}
	}

	export default App;