How to use piral - 8 common examples

To help you get started, we’ve selected a few piral examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github smapiot / piral / src / samples / sample-piral / src / components / User.tsx View on Github external
export const User: React.FC = () => {
  const [open, setOpen] = React.useState(false);
  const currentUser = useGlobalState(m => m.user);
  const menuItems = useGlobalState(m => m.components.menuItems);
  const itemNames = Object.keys(menuItems).filter(m => menuItems[m].settings.type === 'user');
  const container = React.useRef(undefined);
  const image = currentUser ? require('../images/male.png') : require('../images/female.png');
  const items = itemNames.length > 0 && (
    <>
      <li>
      {itemNames.map(name =&gt; {
        const Component = menuItems[name].component;
        return ;
      })}
    
  );
  useOnClickOutside(container, () =&gt; setOpen(false));

  return (
    <div open=""></div></li>
github smapiot / piral / src / samples / sample-piral / src / components / User.tsx View on Github external
export const User: React.FC = () =&gt; {
  const [open, setOpen] = React.useState(false);
  const currentUser = useGlobalState(m =&gt; m.user);
  const menuItems = useGlobalState(m =&gt; m.components.menuItems);
  const itemNames = Object.keys(menuItems).filter(m =&gt; menuItems[m].settings.type === 'user');
  const container = React.useRef(undefined);
  const image = currentUser ? require('../images/male.png') : require('../images/female.png');
  const items = itemNames.length &gt; 0 &amp;&amp; (
    &lt;&gt;
      <li>
      {itemNames.map(name =&gt; {
        const Component = menuItems[name].component;
        return ;
      })}
    
  );
  useOnClickOutside(container, () =&gt; setOpen(false));

  return (</li>
github smapiot / piral / src / samples / sample-piral / src / components / User.tsx View on Github external
const [open, setOpen] = React.useState(false);
  const currentUser = useGlobalState(m =&gt; m.user);
  const menuItems = useGlobalState(m =&gt; m.components.menuItems);
  const itemNames = Object.keys(menuItems).filter(m =&gt; menuItems[m].settings.type === 'user');
  const container = React.useRef(undefined);
  const image = currentUser ? require('../images/male.png') : require('../images/female.png');
  const items = itemNames.length &gt; 0 &amp;&amp; (
    &lt;&gt;
      <li>
      {itemNames.map(name =&gt; {
        const Component = menuItems[name].component;
        return ;
      })}
    
  );
  useOnClickOutside(container, () =&gt; setOpen(false));

  return (
    <div open="">
      <div> setOpen(!open)}&gt;
        <img alt="Profile Image" src="{image}">
      </div>
      <ul>
        {currentUser ? (
          &lt;&gt;
            <li>
              <span>Name</span>
              {currentUser.firstName} {currentUser.lastName}
            </li>
            {items}
            <li>
            </li><li></li></ul></div></li>
github smapiot / piral / src / samples / sample-piral / src / components / LanguagePicker.tsx View on Github external
const LanguagePickerView: React.FC = ({ selected, available }) =&gt; {
  const [open, setOpen] = React.useState(false);
  const [language, setLanguage] = useDynamicLanguage(selected, loadLanguage);
  const container = React.useRef();
  const translate = useTranslate();
  useOnClickOutside(container, () =&gt; setOpen(false));

  return (
    <div>
      <div> setOpen(!open)}&gt;
        
      </div>
      <ul>
        {available.map(lang =&gt; (
          <li> setLanguage(lang)}&gt;
             <span>{translate(lang)}</span>
          </li>
        ))}
      </ul>
    </div>
  );
};
github smapiot / piral / src / samples / sample-piral / src / layout.tsx View on Github external
DashboardContainer: ({ children }) =&gt; {
    const translate = useTranslate();
    return (
      <div>
        <h1>{translate('sample')}</h1>
        <div>{children}</div>
      </div>
    );
  },
  DashboardTile: ({ children, rows, columns }) =&gt; <div>{children}</div>,
github smapiot / piral / src / samples / sample-piral / src / components / LanguagePicker.tsx View on Github external
const LanguagePickerView: React.FC = ({ selected, available }) =&gt; {
  const [open, setOpen] = React.useState(false);
  const [language, setLanguage] = useDynamicLanguage(selected, loadLanguage);
  const container = React.useRef();
  const translate = useTranslate();
  useOnClickOutside(container, () =&gt; setOpen(false));

  return (
    <div>
      <div> setOpen(!open)}&gt;
        
      </div>
      <ul>
        {available.map(lang =&gt; (
          <li> setLanguage(lang)}&gt;
             <span>{translate(lang)}</span>
          </li>
        ))}
      </ul>
    </div>
  );
github smapiot / piral / src / samples / sample-piral / src / index.tsx View on Github external
import 'bootstrap/dist/css/bootstrap.min.css';
import { renderInstance, getUserLocale, setupLocalizer } from 'piral';
import { createAuthApi } from 'piral-auth';
import { createSearchApi } from 'piral-search';
import { setupFooter, setupMenu } from './parts';
import { layout, errors } from './layout';

renderInstance({
  settings: {
    locale: setupLocalizer({
      language: getUserLocale,
      messages: {
        de: {},
        en: {},
      },
    }),
    menu: {
      items: [...setupMenu(), ...setupFooter()],
    },
  },
  extendApi: [createAuthApi(), createSearchApi()],
  requestPilets() {
    return fetch('https://feed.piral.io/api/v1/pilet/sample')
      .then(res => res.json())
      .then(res => res.items);
  },
github smapiot / piral / src / samples / sample-piral / src / components / LanguagePicker.tsx View on Github external
const LanguagePickerView: React.FC = ({ selected, available }) =&gt; {
  const [open, setOpen] = React.useState(false);
  const [language, setLanguage] = useDynamicLanguage(selected, loadLanguage);
  const container = React.useRef();
  const translate = useTranslate();
  useOnClickOutside(container, () =&gt; setOpen(false));

  return (
    <div>
      <div> setOpen(!open)}&gt;
        
      </div>
      <ul>
        {available.map(lang =&gt; (
          <li> setLanguage(lang)}&gt;
             <span>{translate(lang)}</span>
          </li>
        ))}
      </ul></div>

piral

The all-in-one piral package.

MIT
Latest version published 14 days ago

Package Health Score

84 / 100
Full package analysis