@megalabs/react-benefits

<!-- STORY -->

Stats

stars 🌟issues ⚠️updated 🛠created 🐣size 🏋️‍♀️
@megalabs/react-benefits
Minified + gzip package size for @megalabs/react-benefits in KB

Readme

Компонент 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;

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.